在chrome 47上(正确的行为): 在chrome 47上,div .scroll正确滚动,使用flex调整高度为100%。
.scroll
在Firefox(错误的行为)上: 在Firefox上,与div一起.scroll使用的是内容高度,并且滚动不正确。
跨浏览器解决此问题的方法是什么?
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: auto
min-height: auto
您可以使用min-width: 0/ 覆盖此设置min-height: 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 */ }
以下是规范的一些详细信息:
4.5。 弹性项目的隐含最小大小
为了为弹性商品提供更合理的默认最小尺寸,此规范引入了一个新auto值作为CSS 2.1中定义的min-width和min- height属性的初始值。
auto
min-width
min- height
更新
Chrome似乎已更新了其渲染行为。Chrome 48现在在最小伸缩大小方面模仿了Firefox。
根据以下链接中的报告,以上解决方案也应在Chrome 48中运行。