html – 在Firefox和Chrome中使用flexbox渲染问题48
参见英文答案 >
Why don’t flex items shrink past content size?1个
在chrome 47上(正确的行为): 在chrome 47上,带.scroll的div正确滚动,使用flex取高度100%. 在Firefox上(错误的行为): 什么是这个问题的跨浏览器解决方案? 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-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 以下是规范中的一些细节:
UPDATE Chrome似乎已更新其渲染行为. Chrome 48现在可以根据最小的弹性尺寸来模拟Firefox. 根据以下链接中的报告,上述解决方案也适用于Chrome 48. > Possible Chrome 48 flexbox bug causing layout issues. #6841 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |