Lücke unter Bild mit Flexbox in ie11

Question

So versuchte ich zu beantworten this question mit nur display:flex (versuchen, alle kleinen Nuancen des Flex zu lernen), aber ich stieß auf ein Problem, dass in ie11 scheint es ein Leerzeichen unter der Bild - es sieht so aus, als ob der Bildhalter die ursprüngliche Bildhöhe nimmt.

Gibt es eine einfache Lösung, so dass der Bildhalter so groß wie das Bild darin ist?

body, 
 
html { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
body { 
 
    display: flex; 
 
    max-height: 100%; 
 
} 
 

 
.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-grow: 1; 
 
    height: 100%; 
 
    max-height: 100%; 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 

 
header { 
 
    background: grey 
 
} 
 

 
main { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex: 1; 
 
    background: blue 
 
} 
 

 
.column { 
 
    width: 50%; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
    display: flex; 
 
    flex: 1; 
 
    flex-direction: column; 
 
} 
 

 
.column:first-child { 
 
    background: yellow; 
 
} 
 

 
.column:last-child { 
 
    background: green; 
 
} 
 

 
.image-holder { 
 
    margin-bottom: 10px; 
 
    background: orange; 
 
} 
 

 
.image { 
 
    width: 100%; 
 
    display: block; 
 
    height: auto; 
 
} 
 

 
.scrollable-content { 
 
    flex: 1; 
 
    background: grey; 
 
    position: relative; 
 
    height: 10px; 
 
} 
 

 
.firefox-scroller { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    overflow: auto; 
 
    padding: 20px; 
 
    box-sizing:border-box; 
 
}

<div class="wrapper"> 
 
    <header>header</header> 
 
    <main> 
 
    <div class="column"> 
 
     <div class="image-holder"> 
 
     <img src="http://l7.alamy.com/zooms/19704c162b4446c984a50bfdb49b45ac/a-colour-image-taken-on-a-cloudy-dawn-of-the-town-of-saint-malo-from-g1k27a.jpg" alt="" class="image"> 
 
     </div> 
 
     <div class="scrollable-content"> 
 
     <div class="firefox-scroller"> 
 
      <h1>I am trying to do:</h1> 
 
      <h3>1) make these gray div height 100% till bottom</h3> 
 
      <h3>2) When content is more then this gray div should be scrollable or else not</h3> 
 
      <p> 
 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
 
      </p> 
 

 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="column"> 
 
     <div class="image-holder"> 
 
     <img src="http://l7.alamy.com/zooms/19704c162b4446c984a50bfdb49b45ac/a-colour-image-taken-on-a-cloudy-dawn-of-the-town-of-saint-malo-from-g1k27a.jpg" alt="" class="image"> 
 
     </div> 
 

 
    </div> 
 
    </main> 
 
</div>

ich um mit Flex-schrumpfen und Flex-Basis habe versucht zu spielen scheinen aber nur konnte nicht von diesem Raum, um loszuwerden. Dummes ie!

Answer 1

Sie können eine Reflow in IE Kraft mit min-height:

Beispiel:

body, 
 
html { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
body { 
 
    display: flex; 
 
    max-height: 100%; 
 
} 
 
.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-grow: 1; 
 
    height: 100%; 
 
    max-height: 100%; 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 
header { 
 
    background: grey 
 
} 
 
main { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex: 1; 
 
    background: blue 
 
} 
 
.column { 
 
    width: 50%; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
    display: flex; 
 
    flex: 1; 
 
    flex-direction: column; 
 
} 
 
.column:first-child { 
 
    background: yellow; 
 
} 
 
.column:last-child { 
 
    background: green; 
 
} 
 
.image-holder { 
 
    margin-bottom: 10px; 
 
    background: orange; 
 
    min-height: 1%; 
 
    /* added for IE */ 
 
} 
 
.image { 
 
    width: 100%; 
 
    display: block; 
 
    height: auto; 
 
} 
 
.scrollable-content { 
 
    flex: 1; 
 
    background: grey; 
 
    position: relative; 
 
    height: 10px; 
 
} 
 
.firefox-scroller { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    overflow: auto; 
 
    padding: 20px; 
 
    box-sizing: border-box; 
 
}

<div class="wrapper"> 
 
    <header>header</header> 
 
    <main> 
 
    <div class="column"> 
 
     <div class="image-holder"> 
 
     <img src="http://l7.alamy.com/zooms/19704c162b4446c984a50bfdb49b45ac/a-colour-image-taken-on-a-cloudy-dawn-of-the-town-of-saint-malo-from-g1k27a.jpg" alt="" class="image"> 
 
     </div> 
 
     <div class="scrollable-content"> 
 
     <div class="firefox-scroller"> 
 
      <h1>I am trying to do:</h1> 
 
      <h3>1) make these gray div height 100% till bottom</h3> 
 
      <h3>2) When content is more then this gray div should be scrollable or else not</h3> 
 
      <p> 
 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
 
      </p> 
 

 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="column"> 
 
     <div class="image-holder"> 
 
     <img src="http://l7.alamy.com/zooms/19704c162b4446c984a50bfdb49b45ac/a-colour-image-taken-on-a-cloudy-dawn-of-the-town-of-saint-malo-from-g1k27a.jpg" alt="" class="image"> 
 
     </div> 
 

 
    </div> 
 
    </main> 
 
</div>