在 overflow:auto 中使用 flexbox 在 IE11 中不起作用

Question

我有以下示例，它是我在我的应用程序中使用的模式 window 的示例。问题是在 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;
}

在 overflow:auto 中使用 flexbox 在 IE11 中不起作用

Using flexbox with overflow:auto is not working in IE11

css

flexbox

internet-explorer-11