<分区>
<分区>
在 chrome 47 上(正确行为):
在 chrome 47 上，带有 .scroll 的 div 正在正确滚动，使用 flex 将高度设置为 100%。
在 firefox 上(错误行为):
在 Firefox 上，带有 .scroll 的 div 正在使用内容高度并且无法正确滚动。
这个问题的跨浏览器解决方案是什么？
for (var i = 0; i < 100; i++)
$(".scroll").append("Dynamic content<br>");body,
html {
margin: 0;
padding: 0;
}
.container {
box-sizing: border-box;
position: absolute;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}
.content {
background: yellow;
flex: 1;
display: flex;
flex-direction: column;
}
.scroll {
flex: 1 1 auto;
overflow: scroll;
}<div class="container">
<div class="bar">Small</div>
<div class="content">
<div>Static content</div>
<div class="scroll"></div>
<div>Static content</div>
</div>
<div class="footer">Small</div>
</div>问题已更新以区分 Chrome 47 和 Chrome 48。
最佳答案
flexbox 规范已更新，使 flex 元素的默认最小尺寸等于内容的尺寸:min-width: auto/min-height: auto。
您可以使用 min-width: 0/min-height: 0 覆盖此设置:
.content {
background: yellow;
flex: 1;
display: flex;
flex-direction: column;
min-height: 0; /* NEW */
min-width: 0; /* NEW */
}
http://jsfiddle.net/d4nkevee/1/
错误报告:https://bugzilla.mozilla.org/show_bug.cgi?id=1043520
以下是规范中的一些细节:
4.5. Implied Minimum Size of Flex Items
To provide a more reasonable default minimum size for flex items, this specification introduces a new
autovalue as the initial value of themin-widthandmin-heightproperties defined in CSS 2.1. (read more)
更新
Chrome 似乎更新了它们的渲染行为。 Chrome 48 现在在最小 flex 大小方面模仿 Firefox。
根据以下链接中的报告，上述解决方案也应该适用于 Chrome 48。
关于html - 在 Firefox 和 Chrome 48 中使用 flexbox 呈现问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35195876/