Flexbox子項在IE上指定了最大高度的溢出父項

Question

我有一個父元素，其中包含兩個使用flexbox顯示在彼此之上的子元素。此父元素將max-height屬性設置爲某個值。所以，只要內容很短，父元素應該保持較小，隨着內容的增長，父元素會隨着它的增長而增長，直到達到其最大高度。在這一點上，我們應該看到內容元素上的滾動條。

#container { 
 
    display: flex; 
 
    max-width: 80vw; 
 
    max-height: 100px; 
 
    flex-direction: column; 
 
} 
 

 
#content { 
 
    overflow-y: auto; 
 
} 
 

 
/* styling - ignore */ 
 
#container { 
 
    border: 2px solid black; 
 
    margin-bottom: 1em; 
 
} 
 
#header { 
 
    background-color: rgb(245, 245, 245); 
 
    padding: 10px; 
 
} 
 
#content { 
 
    background-color: rgb(255, 255, 255); 
 
    padding: 0 10px; 
 
}

<div id="container"> 
 
    <div id="header">Header</div> 
 
    <div id="content"> 
 
    <p>Everything works as supposed to, move along</p> 
 
    </div> 
 
</div> 
 

 
<div id="container"> 
 
    <div id="header">Header</div> 
 
    <div id="content"> 
 
    <p>Very long content</p> 
 
    <p>Very long content</p> 
 
    <p>Very long content</p> 
 
    <p>Very long content</p> 
 
    </div> 
 
</div>

這工作完全在Firefox和Chrome。在Internet Explorer上，雖然內容元素中的滾動條未顯示;相反，內容元素從父元素溢出。

我試着玩弄flex-basis和其他flexbox屬性，搜索了很多，但沒有任何運氣。

Answer 1

嘗試高度：100px而不是最大高度：100px;在#container的，即：

#container { 
    display: flex; 
    max-width: 80vw; 
    height: 100px; 
    flex-direction: column; 
} 

#container { 
 
    display: flex; 
 
    max-width: 80vw; 
 
    height: 100px; 
 
    flex-direction: column; 
 
} 
 

 
#content { 
 
    overflow-y: auto; 
 
} 
 

 
/* styling - ignore */ 
 
#container { 
 
    border: 2px solid black; 
 
    margin-bottom: 1em; 
 
} 
 
#header { 
 
    background-color: rgb(245, 245, 245); 
 
    padding: 10px; 
 
} 
 
#content { 
 
    background-color: rgb(255, 255, 255); 
 
    padding: 0 10px; 
 
}

<div id="container"> 
 
    <div id="header">Header</div> 
 
    <div id="content"> 
 
    <p>Everything works as supposed to, move along</p> 
 
    </div> 
 
</div> 
 

 
<div id="container"> 
 
    <div id="header">Header</div> 
 
    <div id="content"> 
 
    <p>Very long content</p> 
 
    <p>Very long content</p> 
 
    <p>Very long content</p> 
 
    <p>Very long content</p> 
 
    </div> 
 
</div>