状况
新项目中会存在以下几种嵌套循环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>
<!-- 合理布局1 -->
<div class="card flex">
<div class="header">Header</div>
<div class="flex">
<div class="scroll">
<div class="p"></div>
</div>
</div>
</div>
<!-- 合理布局2 -->
<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? 纳尼？
缘故
究其缘故，标准相关高宽比的解释在这1章节，简易归纳便是：
flex元素的最少尺寸（视主轴方位决策是高還是宽）是內部內容的尺寸。即，min-height/min-width默认设置值是“auto”。
emmm...读“标准”千遍，其义自见。当再3了解这个结果后发现，好像，新版Chrome的完成是合乎标准的！的确，Chrome的此举修改便是以便让访问器的flex合理布局个人行为更接近标准。
Chrome小区的这个issue：Flexbox rendering changed between chrome 71 and 72，对上面的难题（合理布局2），开展了猛烈的探讨，乃至最后致使了官方的回退。
至于大家为何后知后觉，直至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层层往下传送，不足环保。
花絮
难题是圆满修补了，下面是1些插曲~
1. Chrome 71->72->73
这个修改首发于Chrome 72，但为何直至Chrome 73才被大家留意到？由于Chrome 72公布后，因为反应明显，Chrome决策先回退修改，给开发设计者更多的時间来融入该修改。
但是Chrome 72的公布，和72的后续回退公布都产生在我国新春佳节暑假期内，没甚么客户意见反馈，针对我国开发设计者，比如我，彻底没留意到这次预警。。。
2. min-width的学前文化教育
为何说我早已被min-width提早文化教育过？
我完成过相近编写器的tab：
这里便是嵌套循环的flex横向合理布局，在默认设置款式下，翻转区会被子元素撑开，也便是此时，我第1次领略了当初就感觉很怪异的min-width: 0的写法。
那为何那时就必须显式申明父元素的min-width呢？另外，这次升級所导致的误伤全是产生在纵向合理布局的flex上，那横向合理布局的flex有危害吗？
回答实际上很狗血，由于Chrome针对min-width的默认设置值，从很初期就设定为合乎标准的“auto”了。。。
参照
总结
以上便是这篇文章内容的所有內容了，期待本文的內容对大伙儿的学习培训或工作中具备1定的参照学习培训使用价值，感谢大伙儿对脚本制作之家的适用。