firefox overflow-y不能使用嵌套的flexbox

Question

firefox overflow-y不能使用嵌套的flexbox

rek*_*kna 73 firefox overflow css3 flexbox

我设计了一个100%宽度100%高度布局与css3 flexbox,它适用于IE11(如果IE11仿真正确,可能在IE10上).

但Firefox(35.0.1),overflow-y无效.正如你在这个codepen中看到的那样: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;
}

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

dho*_*ert 177

tl;博士:你需要min-height:0在你的.level-0-row2统治中.(这是一个具有该修复的codepen.)

更详细的解释:

Flex项目建立一个默认的最小大小,该大小基于其子级的内在大小(不考虑其子级/后代的"溢出"属性).

只要你有一个元素与overflow: [hidden|scroll|auto] 内部柔性项目,你需要给它的祖先弯曲项目min-width:0(水平柔性容器)或min-height:0(在垂直柔性容器),禁用此分上浆行为,否则柔性item将拒绝缩小小于孩子的最小内容大小.

有关被此咬过的网站的更多示例,请参阅https://bugzilla.mozilla.org/show_bug.cgi?id=1043520.(请注意,在实施此规范文本后,这只是跟踪被此类问题打破的网站的代谢组合 - 它实际上并不是Firefox中的错误.)

~~你不会在Chrome中看到这一点(至少,不是这篇文章),因为他们还没有实现这个最小的大小调整行为.~~(编辑:Chrome现在已经实现了这种最小化行为,但在某些情况下,它们可能仍会错误地将最小尺寸折叠为0.)

它可能需要应用于作为flex项的每个祖先(即,其父级为`display:flex`的每个祖先),具体取决于具体情况. (6认同)
@Brett,这里有一个jsfiddle,演示了使用`min-width:0`过于激进可能产生的那种不良(内容溢出/重叠):https://jsfiddle.net/85scnr1b/所以真的,你只想添加对于灵活项目的`min-width:0`,如果给定的宽度比预期的任意小,则其内容可以"表现得很好".(对于垂直弹性容器,"min-height"和"height"也是如此.) (4认同)
我已经遇到了这个问题但是我必须在所有父Flexbox列中添加min-height:0 - 任何想法为什么？ (3认同)

归档时间：	10 年，6 月前
查看次数：	28512 次
最近记录：	8 年，8 月前