firefox overflow-y 不适用于嵌套的 flexbox

Question

我用 css3 flexbox 设计了一个 100% 宽 100% 高的布局，它可以在 IE11 上运行（如果 IE11 的模拟正确，也可能在 IE10 上运行）。

但是 Firefox (35.0.1)，overflow-y 不工作。正如您在此代码笔中所见： http://codepen.io/anon/pen/NPYVga

firefox 未正确渲染溢出。它显示一个滚动条

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}
.level-0-container {
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column; 
}
.level-0-row1 {
  border: 1px solid black;
  box-sizing: border-box;
}
.level-0-row2 {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border: 1px solid black;
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}
.level-1-col1 {
  width: 20em;
  overflow-y: auto;
}
.level-1-col2 {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border: 4px solid blue;
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.level-2-row2 {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border: 4px solid red;
  box-sizing: border-box;
  overflow-y: auto;
}

<html>
<body>

    <div class="level-0-container">

        <div class="level-0-row1">
            Header text
        </div>

        <div class="level-0-row2">

            <div class="level-1-col1">
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                
            </div>

            <div class="level-1-col2">

                    <div class="level-2-row1">
                        Some text
                        <p/> Some text 2
                        <p/> Some text 3
                        <p/> 
                    </div>

                    <div class="level-2-row2">
                        <p>some text</p>
                        <p>some text</p> 
                        <p>some text</p> 
                        <p>some text</p>
                        <p>some text</p>
                        <p>some test</p>
                    </div> 
                </div>

        </div>

    </div>
</body>


</html>

Answer 1

tl;dr：您的 .level-0-row2 规则中需要 min-height:0。 (Here's a codepen with that fix.)

更详细的解释：

Flex 项目根据其 children 的固有大小（不考虑其 children/descendants 的 "overflow" 属性）建立默认的最小大小。

每当你有一个元素 overflow: [hidden|scroll|auto] inside 的弹性项目，你需要给它的祖先弹性项目 min-width:0 （在horizontal flex container) or min-height:0 (in a vertical flex container), 以禁用此 min-sizing 行为，否则 flex 项目将拒绝收缩小于 child 的 min-content尺寸。

请参阅 https://bugzilla.mozilla.org/show_bug.cgi?id=1043520 了解更多被此攻击的网站示例。（请注意，这只是一个元错误，用于跟踪因此类问题而损坏的网站，在实施此 spec-text 之后——它实际上并不是 Firefox 中的错误。）

~~你不会在 Chrome 中看到这个（至少，在这篇文章中不会）因为他们 haven't implemented this minimum sizing behavior yet.~~ (EDIT: Chrome has now implemented this min-sizing behavior, but they may still incorrectly collapse min-sizes to 0 in some cases.)

Answer 2

最近我发现了一个更好的解决方案：

而不是使用：

flex:1 1 auto;
min-height: 0;

更好用：

flex:1 1 0;

基本上这告诉浏览器将元素的大小初始设置为 0（因此替换最小高度）并允许它按 1 的比例扩展。

Kevin Powell 有一个非常好的视频解释了 flexbox 的工作原理，我强烈推荐观看 (https://www.youtube.com/watch?v=fm3dSg4cxRI) 它详细解释了 flexbox 算法的工作原理。

firefox overflow-y 不适用于嵌套的 flexbox

firefox overflow-y not working with nested flexbox

css

firefox

overflow

flexbox