使用带溢出的flexbox：auto在IE11中不起作用

Question

我有以下示例，它是我在我的应用程序中使用的模态窗口的示例。问题出在IE11中，它没有正确显示溢出，而是文本从底部流出。

设置 .rowoverlay { position: absolute; top: 0; left: 0; z-index: 0; bottom: 0; right: 0; height: 100%; } 的IE的各种修复方法没有给我预期的结果。我错过了让IE11表现出来的东西？

＆＃13;

＆＃13;

<div class="container-fluid homepage-text-plugin">

    <div class="row rowoverlay">
        <div class="col-md-12 col-lg-5" style="background-color: green;"></div>
        <div class="col-md-12 col-lg-7" style="background-color: red;">

      </div>

    </div>

    <div class="container ">

        <div class="row">
            <div class="col-md-12 col-lg-4 " style="background-color: blue;">
                A text block
            </div>
            <div class="col-md-12 col-lg-7" style="background-color: yellow;">
                More text<p>
            </div>

        </div>
    </div>

</div>

＆＃13;

flex:1

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

编辑

此答案现在停止内容始终具有150px高度。

• 将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;
}