使用带有溢出的弹性框：自动在 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;
}