IE瀏覽器 - Flexbox嵌套divs繼承父級高度

Question

我有一個flexbox網格佈局，其中一列中有一個高圖像，另一列中有兩個較短的圖像堆疊在另一列的頂部。

這是它看起來像它的Chrome：

在Internet Explorer中，兩個較小的嵌套圖像的高度/ div的被拉伸到第一列的高度。

我如何與兩個嵌套圖像列保住自己的身高是多少？

h3 { 
 
    margin-bottom: 20px; 
 
} 
 

 
.grid { 
 
    box-sizing: border-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-flow: row nowrap; 
 
    flex-flow: row nowrap; 
 
    margin-left: -10px; 
 
    margin-right: -10px; 
 
} 
 

 
.col-4 { 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
    box-sizing: border-box; 
 
    -ms-flex: 0 0 auto; 
 
    flex: 0 0 auto; 
 
    flex-basis: 33.33333%; 
 
    max-width: 33.33333%; 
 
} 
 

 
.executive-container { 
 
    max-width: 1440px; 
 
    margin-top: 0; 
 
    margin-bottom: 0; 
 
    margin-left: auto !important; 
 
    margin-right: auto !important; 
 
    padding: 0 5.21%; 
 
    padding-top: 80px; 
 
    padding-bottom: 0; 
 
} 
 

 
.executive-container .box { 
 
    margin-bottom: 20px; 
 
    -ms-flex-order: 1; 
 
    order: 1; 
 
} 
 

 
.executive-container .box .box-inner { 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-direction: column; 
 
    flex-direction: column; 
 
    -ms-flex-pack: justify; 
 
    justify-content: space-between; 
 
    height: 100%; 
 
} 
 

 
.resimg { 
 
    width: 100%; 
 
    height: auto; 
 
    vertical-align: bottom; 
 
} 
 

 
.executive-container .box .board-member { 
 
    position: relative; 
 
} 
 

 
.executive-container .box .board-member .board-member-details { 
 
    width: 66%; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    color: red; 
 
    padding: 20px; 
 
    font-size: 1.8rem; 
 
    letter-spacing: 0; 
 
    font-weight: normal; 
 
    font-style: normal; 
 
    line-height: 2.9rem; 
 
    font-weight: 700; 
 
    line-height: 2.1rem; 
 
    letter-spacing: -0.02em; 
 
}

<div class="grid executive-container"> 
 
    <div class="box col-4 heading"> 
 
    <h3>Executive<br>Leadership<br>Team</h3></div> 
 
    <div class="box col-12_sm-6_md-4"> 
 
    <div class="board-member"> 
 
     <div class="board-member-details"> 
 
     <div class="board-name">Caption</div> 
 
     </div> 
 
     <img src="http://via.placeholder.com/821x1125" alt="" class="resimg portrait-desktop"> 
 
    </div> 
 
    </div> 
 
    <div class="box col-4"> 
 
    <div class="box-inner"> 
 
     <div class="board-member"> 
 
     <div class="board-member-details"> 
 
      <div class="board-name">Caption</div> 
 
     </div><img src="http://via.placeholder.com/819x536" alt="" class="resimg"></div> 
 
     <div class="board-member"> 
 
     <div class="board-member-details"> 
 
      <div class="board-name">Caption</div> 
 
     </div><img src="http://via.placeholder.com/819x536" alt="" class="resimg"></div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

這有助於！ Flexbox on IE11: image stretched for no reason?

我在flex-child上設置了flex-shrink：0，它解決了IE中的問題。