ギャップ以下のイメージie11でフレックスボックスを使用

Question

display:flex（フレックスの小さな微妙なニュアンスを覚えようとしています）だけを使ってthis questionと答えようとしていましたが、私は、ie11の中にスペースがあるようですimage - イメージホルダーが元のイメージの高さを取っているかのように見えます。

イメージホルダーの内側のイメージと同じ高さになるように簡単に修正できますか？

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>

私はシュリンクフレックスとフレックスの基礎で遊んでみましたが、ちょうどそのスペースを取り除くように見えることができませんでした。愚かな、すなわち！あなたが最小の高さとIEでリフローを強制することができます

Answer 1

：

例：

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>