Css Flexbox：在内容溢出时在其他两个flexchild之间滚动flexchild

我有一个模态对话框，它以覆盖图为中心

该对话框是一个包含三个子flex的flex容器，最大高度为90%

如果文档的高度小于模态所需的高度，我希望第二个子项（模态体）启用滚动

<div class="modal">
    <div class="modal-header"><h2>Modal Header</h2></div>
    <div class="modal-body">  <!--this should scroll if modal-height > 90% -->
        <!-- content -->
    </div>
    <div class="modal-controls"><!-- controls --></div>
</div>

以下是我的方法的一个例子

如果调整输出窗口的大小，可以看到模式对话框在底部被剪切，而不是滚动溢出

---

提前谢谢。

这很简单。你所需要的只是更换

.modal {
    ...
    flex-flow: row wrap;
}

与

它是有效的。不需要，但还应防止模式标题和模式控件展开：

.modal-header, .modal-controls {
    flex: 0 0 auto;
}
.modal {
    ...
    flex: 1 1 auto;
}

这是一个

.modal {
    ...
    flex-direction: column;
}

.modal-header, .modal-controls {
    flex: 0 0 auto;
}
.modal {
    ...
    flex: 1 1 auto;
}