Question

我有一个模态对话框，它以叠加为中心。

该对话框是一个包含三个弹性子节点的弹性容器，最大高度为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>

我不知道纯css是否可行。

.modal {
    position: relative;
    width: 10em;
    max-width: 90%;
    max-height: 90%;
    background-color: green;
    display: flex;
    flex-flow: row wrap;
}
.modal-header { flex: 1 auto; } 
.modal-body {
    flex: 1 auto;
    overflow-y: scroll;
}   
.modal-controls { flex: 1 auto; }

这是我的Fiddle方法。

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

提前致谢。

Answer 1

这很简单。您只需要替换

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

与

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

它有效。不是必需的，但你也应该阻止modal-header和modal-controls扩展：

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

这是working example

Flexbox：在内容溢出时在另外两个flexchildren之间滚动flexchild

1 个答案: