Firefox的溢出 – 不适用于嵌套的Flexbox
我用css3 flexboxdevise了100％宽度的100％高度布局，它可以在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; } <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>
tl; dr：您的.level-0-row2规则中需要min-height:0 。 （ 这是一个解决scheme的代码 。）
更详细的解释：
Flex项目build立了一个默认的最小尺寸，这个尺寸是基于他们孩子的内在尺寸的（不考虑孩子/后代的“溢出”属性）。
无论何时Flex元素中有overflow: [hidden|scroll|auto]元素，都需要给它的祖先flex项min-width:0 （在水平柔性容器中）或min-height:0 （在一个垂直柔性容器中），禁用这个最小尺寸的行为，否则flex项目将拒绝缩小比孩子的最小内容尺寸更小的尺寸。
请参阅https://bugzilla.mozilla.org/show_bug.cgi?id=1043520了解更多已被此叮咬的网站示例。; （请注意，这只是一个用于追踪被这种问题破坏的网站的代理，在实现这个规范文本之后 – 它实际上并不是Firefox中的一个错误。）
在Chrome中你不会看到这个（至less不是这个post），因为他们还没有实现这个最小尺寸的行为 。 （编辑：Chrome现在已经实现了这个最小化的行为，但是在某些情况下 ，他们仍然可能会错误地将min-sizes折成0 。
简单的答案是，添加一个“fireFoxFlexShield”元素溢出发生的地方。 fireFoxFlexShield是立即flex-item，然后你把溢出y：滚动到fireFoxFlexShield。
.textConvBody{ height: 300px; .fireFoxFlexShield{ overflow-y: scroll; height: 100%; .scrollContainer{ width: 100%; max-width: 100%; } } }
但要小心，因为这可能会打破与Chrome兼容的风格。
