使用帶有溢出功能的flexbox：auto在IE11中不工作

Question

我有以下示例，它是我在應用程序中使用的模式窗口的示例。問題是在IE11中，它沒有正確顯示溢出，而是文本流出底部。

針對IE瀏覽器的各種修復程序（如設置flex:1）沒有給出我想要的結果。我錯過了什麼讓IE11的行爲？

#main { 
 
    display: flex; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    -webkit-transform: translate(-50%, -50%); 
 
    background-color: gray; 
 
    max-height: 150px; 
 
    flex-direction: column; 
 
} 
 

 
.top, .bottom 
 
{ 
 
    color: white; 
 
    background: blue; 
 
} 
 

 
.content { 
 
    overflow: auto; 
 
}

<div id="main"> 
 
    <div class="top">Top</div> 
 
    <div class="content"> asojsadoijdasoijasoijoasijoiasdjiojasd<br /> 
 
    asojsadoijdasoijasoijoasijoiasdjiojasd<br /> 
 
    asojsadoijdasoijasoijoasijoiasdjiojasd<br /> 
 
    asojsadoijdasoijasoijoasijoiasdjiojasd<br /> 
 
    asojsadoijdasoijasoijoasijoiasdjiojasd<br /> 
 
    asojsadoijdasoijasoijoasijoiasdjiojasd<br /> 
 
    asojsadoijdasoijasoijoasijoiasdjiojasd<br /> 
 
    asojsadoijdasoijasoijoasijoiasdjiojasd<br /> 
 
    asojsadoijdasoijasoijoasijoiasdjiojasd<br /> 
 
    asojsadoijdasoijasoijoasijoiasdjiojasd<br /></div> 
 
    <div class="bottom">Bottom</div> 
 

 
</div>

https://codepen.io/anon/pen/dRWGBr

Answer 1

編輯

這個答案現在停止的內容總是有150像素的高度。

• 地址：max-height: 150px到.content
• 保持：overflow: auto;上.content

https://codepen.io/anon/pen/zzwmgX

.main { 
 
    display: flex; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    -webkit-transform: translate(-50%, -50%); 
 
    background-color: gray; 
 
    flex-direction: column; 
 
} 
 

 
.top, .bottom 
 
{ 
 
    color: white; 
 
    background: blue; 
 
} 
 

 
.content { 
 
    overflow-y: auto; 
 
    max-height: 150px; 
 
}