在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.
解决方法
您可以使用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
以下是规范中的一些细节:
07002
To provide a more reasonable default minimum size for flex items,this
specification introduces a newauto
value as the initial value of
themin-width
andmin-height
properties defined in CSS 2.1. (07003)
UPDATE
Chrome似乎已更新其渲染行为. Chrome 48现在可以根据最小的弹性尺寸来模拟Firefox.
根据以下链接中的报告,上述解决方案也适用于Chrome 48.
> Possible Chrome 48 flexbox bug causing layout issues. #6841
> Issue 580196: Nested ‘flex-direction:column’ elements don’t shrink properly
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。