使用带有溢出功能的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; 
 
}