Chrome 73导致的flex布局崩坏

5,976 阅读4分钟

现象

项目中会存在如下几种嵌套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”了。。。

参考

  1. Flexbox sets height of inside element to 0
  2. MDN min-height
  3. MDN min-width