css - Firefox flex - 如何使用 flex-direction : column 防止 flex 元素变得太高

Question

我一直致力于 flex 布局，遇到了针对 Firefox 和 IE11 的问题。

我创建了一个 codepen显示问题。

截图

Chrome(左)、Firefox(右)

描述

预期的行为是header 和footer 始终对用户可见，Content 区域使用overflow-y: auto 在需要时滚动其 innerContent。问题是 Firefox 和 Internet Explorer 允许内容区域增长与其 innerContent 一样高，而不是保持flex box 规范规定的尺寸。换句话说，一旦向内容容器添加了足够多的内容而不是踢滚动条，内容容器就会不断变高，然后完全破坏布局。

• 我知道为内容容器使用显式高度是一种解决方法，但它不是我们首选或有效的解决方案。
• 由于我们布局的灵 active ，我们不能只使用百分比之类的东西。

Answer 1

尝试将 overflow: auto; 添加到 .main div

.container .innerContainer .main {
    background-color: #A3845D;
    flex-grow: 1;
    display: flex;
    overflow: auto; /*<< added */
}

在我的 FF (59.0.2) 版本上工作正常，目前无法在 IE 中 checkin 。