在Firefox和Chrome 48中使用flexbox呈现问题
在铬47（正确的行为）：在铬47，与.scroll div滚动正确，使用flex 100％高度。
在Firefox（错误的行为）：在Firefox上，与.scroll该div使用内容的高度，而不是正确滚动。
这个问题的跨浏览器解决scheme是什么？
http://jsfiddle.net/d4nkevee/
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-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。 隐含的弹性项目的最小尺寸
为了给Flex项目提供更合理的默认最小尺寸，本规范引入了一个新的
auto值作为CSS 2.1中定义的min-width和min-height属性的初始值。 （ 阅读更多 ）
UPDATE
Chrome似乎已经更新了他们的渲染行为。 现在，Chrome 48以最小的弹性大小来模拟Firefox。
根据以下链接中的报告，上述解决scheme也可以在Chrome 48中运行。
- 可能的Chrome 48 flexbox错误导致布局问题。 ＃6841
- 问题580196：嵌套的“flex-direction：column”元素不能正确收缩
