現(xiàn)象

項(xiàng)目中會(huì)存在如下幾種嵌套flex結(jié)構(gòu)：

<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之前的實(shí)際展示效果如下（手頭的Electron——Chrome 69）：

都是符合期望的結(jié)果，scroll是可以滾動(dòng)的區(qū)域，然而，Chrome 73的展示效果卻是：

父元素的高度都被子元素?fù)伍_(kāi)了，導(dǎo)致scroll元素?zé)o法滾動(dòng)。what? why? 納尼？

原因

究其原因，規(guī)范有關(guān)高度的解釋在這一章節(jié)，簡(jiǎn)單概括就是：

flex元素的最小大小（視主軸方向決定是高還是寬）是內(nèi)部?jī)?nèi)容的大小。即，min-height/min-width默認(rèn)值是“auto”。

emmm...讀“規(guī)范”千遍，其義自見(jiàn)。當(dāng)再三理解這個(gè)結(jié)論后發(fā)覺(jué)，似乎，新版Chrome的實(shí)現(xiàn)是符合規(guī)范的！確實(shí)，Chrome的此舉改動(dòng)就是為了讓瀏覽器的flex布局行為更貼近規(guī)范。

Chrome社區(qū)的這個(gè)issue：Flexbox rendering changed between chrome 71 and 72，對(duì)上面的問(wèn)題（布局二），進(jìn)行了激烈的討論，甚至最終導(dǎo)致了官方的回滾。

至于我們?yōu)槭裁春笾笥X(jué)，直到73才大面積暴露該問(wèn)題，下文花絮會(huì)展開(kāi)解釋。

不過(guò)，跟著規(guī)范走是完全的政治正確，怎么說(shuō)都對(duì)！開(kāi)發(fā)者只能順應(yīng)潮流去改變。

修復(fù)

其實(shí)，當(dāng)看到這個(gè)現(xiàn)象后，我的內(nèi)心并沒(méi)有經(jīng)歷太大的波動(dòng)，因?yàn)閙in-width曾經(jīng)已經(jīng)給我上過(guò)預(yù)備課了（詳見(jiàn)下文花絮）。所以我很快就找到了解放方式。

找到最外層被撐開(kāi)的元素，上文兩種布局里，都是scroll的直屬父元素，對(duì)其增加min-height: 0的屬性即可修復(fù)異常布局。

如果min-height的行為實(shí)在無(wú)法理解的話，overflow: hidden（非visible）也能達(dá)到同樣的功效。overflow平時(shí)用的比較多，相對(duì)會(huì)更有體感，如下例：

<div style="height: 200px;overflow: scroll;">  <div style="height: 400px"></div></div>

當(dāng)父元素設(shè)置了overflow:hidden/scroll，展示時(shí)，父元素就會(huì)隱藏子元素的溢出部分。

當(dāng)然，flex布局中的overflow，它的實(shí)際作用也就是把min-height設(shè)置為0。

此外，還可以對(duì)子元素，上文示例中即scroll元素，設(shè)置height: 100%來(lái)修復(fù)。但當(dāng)層級(jí)比較多時(shí)，需要將該屬性一層層往下傳遞，不夠環(huán)保。

花絮

問(wèn)題是順利修復(fù)了，下面是一些插曲~

1. Chrome 71->72->73

這個(gè)改動(dòng)首發(fā)于Chrome 72，但為什么直到Chrome 73才被我們注意到？因?yàn)镃hrome 72發(fā)布后，由于反響強(qiáng)烈，Chrome決定先回滾改動(dòng)，給開(kāi)發(fā)者更多的時(shí)間來(lái)適應(yīng)該改動(dòng)。

然而Chrome 72的發(fā)布，以及72的后續(xù)回滾發(fā)布都發(fā)生在中國(guó)春節(jié)假期期間，沒(méi)什么用戶反饋，對(duì)于中國(guó)開(kāi)發(fā)者，例如我，完全沒(méi)注意到這次預(yù)警。。。

2. min-width的學(xué)前教育

為什么說(shuō)我已經(jīng)被min-width提前教育過(guò)？

我實(shí)現(xiàn)過(guò)類似編輯器的tab：

這里就是嵌套的flex橫向布局，在默認(rèn)樣式下，滾動(dòng)區(qū)會(huì)被子元素?fù)伍_(kāi)，也就是此時(shí)，我第一次領(lǐng)略了當(dāng)初就覺(jué)得很奇怪的min-width: 0的寫法。

那為什么那時(shí)就需要顯式聲明父元素的min-width呢？此外，這次升級(jí)所造成的誤傷都是發(fā)生在縱向布局的flex上，那橫向布局的flex有影響嗎？

答案其實(shí)很狗血，因?yàn)镃hrome對(duì)于min-width的默認(rèn)值，從很早期就設(shè)置為符合規(guī)范的“auto”了。。。

參考

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

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)武林網(wǎng)的支持。