Chrome 73导致flex布局崩坏的分析与解决方法
|
项目中会存在如下几种嵌套flex结构： <style> /* 通用样式 */ .card { width: 200px; height: 300px; margin: 20px; border: 1px solid #999; } .flex { display: flex; flex-direction: column; } .header { flex: none; height: 40px; border-bottom: 1px solid #333; } .scroll { overflow-y: auto; } .p { margin: 10px; height: 400px; background-color: rgba(0, 0, 0, 0.2); } </styl> <!-- 布局一 --> <div class="card flex"> <div class="header">Header</div> <div class="flex"> <div class="scroll"> <div class="p"></div> </div> </div> </div> <!-- 布局二 --> <div class="card flex"> <div class="flex"> <div class="header">Header</div> <div class="scroll" style="flex-grow:1;"> <div class="p"></div> </div> </div> </div> 这在Chrome 73之前的实际展示效果如下（手头的Electron——Chrome 69）：
都是符合期望的结果，scroll是可以滚动的区域，然而，Chrome 73的展示效果却是：
父元素的高度都被子元素撑开了，导致scroll元素无法滚动。what? why? 纳尼？ 原因 究其原因，规范有关高度的解释在这一，简单概括就是： flex元素的最小大小（视主轴方向决定是高还是宽）是内部内容的大小。即，min-height/min-width默认值是“auto”。 emmm...读“规范”千遍，其义自见。当再三理解这个结论后发觉，似乎，新版Chrome的实现是符合规范的！确实，Chrome的此举改动就是为了让浏览器的flex布局行为更贴近规范。 Chrome社区的这个issue：Flexbox rendering changed between chrome 71 and 72，对上面的问题（布局二），进行了激烈的讨论，甚至最终导致了官方的回滚。 至于我们为什么后知后觉，直到73才大面积暴露该问题，下文花絮会展开解释。 不过，跟着规范走是完全的政治正确，怎么说都对！开发者只能顺应潮流去改变。 修复 其实，当看到这个现象后，我的内心并没有经历太大的波动，因为min-width曾经已经给我上过预备课了（详见下文花絮）。所以我很快就找到了解放方式。 找到最外层被撑开的元素，上文两种布局里，都是scroll的直属父元素，对其增加min-height: 0的属性即可修复异常布局。 如果min-height的行为实在无法理解的话，overflow: hidden（非visible）也能达到同样的功效。overflow平时用的比较多，相对会更有体感，如下例： <div style="height: 200px;overflow: scroll;"> <div style="height: 400px"></div> </div> 当父元素设置了overflow:hidden/scroll，展示时，父元素就会隐藏子元素的溢出部分。 当然，flex布局中的overflow，它的实际作用也就是把min-height设置为0。 此外，还可以对子元素，上文示例中即scroll元素，设置height: 100%来修复。但当层级比较多时，需要将该属性一层层往下传递，不够环保。 花絮 问题是顺利修复了，下面是一些插曲~ 1. Chrome 71->72->73 这个改动首发于Chrome 72，但为什么直到Chrome 73才被我们注意到？因为Chrome 72发布后，由于反响强烈，Chrome决定先回滚改动，给开发者更多的时间来适应该改动。 然而Chrome 72的发布，以及72的后续回滚发布都发生在中国春节假期期间，没什么用户反馈，对于中国开发者，例如我，完全没注意到这次预警。。。 2. min-width的学前教育 为什么说我已经被min-width提前教育过？ 我实现过类似编辑器的tab：
这里就是嵌套的flex横向布局，在默认样式下，滚动区会被子元素撑开，也就是此时，我第一次领略了当初就觉得很奇怪的min-width: 0的写法。 那为什么那时就需要显式声明父元素的min-width呢？此外，这次升级所造成的误伤都是发生在纵向布局的flex上，那横向布局的flex有影响吗？ 答案其实很狗血，因为Chrome对于min-width的默认值，从很早期就设置为符合规范的“auto”了。。。 （编辑：焦作站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
