Chrome 73致使flex合理布局崩坏的剖析与处理方式

2021-01-20 23:02 jianzhan

状况

新项目中会存在以下几种嵌套循环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. Flexbox sets height of inside element to 0
  2. MDN min-height
  3. MDN min-width

总结

以上便是这篇文章内容的所有內容了,期待本文的內容对大伙儿的学习培训或工作中具备1定的参照学习培训使用价值,感谢大伙儿对脚本制作之家的适用。