起源

2019 年 1 月 29 日，Chrome72 正式版(72.0.3626.81)發(fā)布，本次發(fā)布帶來(lái)了一個(gè)改變，且沒有在更新日志中提及，該改變導(dǎo)致某些網(wǎng)站發(fā)生了布局錯(cuò)亂。該改變主要針對(duì)的是嵌套的flex布局，下面我們一起看下是怎么回事。

問(wèn)題

首先，我們有一個(gè)嵌套的 flex 布局，代碼如下：

area item content

希望實(shí)現(xiàn)這樣的效果：父容器 area 有一個(gè)指定的高度，且它是一個(gè) flex 彈性盒子，它內(nèi)部有一個(gè)子元素 item，使用 flex:1 指定了占滿剩余空間，且 item 也是一個(gè) flex 彈性盒子，它內(nèi)部還有一個(gè)同樣占滿剩余空間的嵌套子元素 nest-item，通過(guò)設(shè)置 overflow:auto 讓它的內(nèi)容超出后顯示滾動(dòng)條。效果如下：

這樣布局的想法很簡(jiǎn)單，即通過(guò)設(shè)置彈性盒子子元素的擴(kuò)展比率，能得到一個(gè)自動(dòng)占滿剩余空間高度的容器，再在這個(gè)容器中放需要顯示的內(nèi)容，在某些情況下，這確實(shí)是一個(gè)比較不錯(cuò)的主意，在 Chrome72 之前都是可以正常顯示的。但是 Chrome72.0.3626.81中顯示如下：

追溯

為什么會(huì)出現(xiàn)這樣的問(wèn)題呢？我們看一下規(guī)范( https://drafts.csswg.org/css-flexbox/#min-size-auto )flex 彈性盒子主軸上子元素的最小大小是內(nèi)容的大小(視主軸方向?yàn)閷捇蚋?。

那么我們?cè)倏匆幌律厦娴睦?#xff0c;area 的主軸是縱向的，子元素 item 的最小高度即是內(nèi)容的高度，而 nest-item 被 content 撐開，content 有一個(gè)高度(600px，超出了容器的高度)，那么 item 的最小高度也就超過(guò)了 600px。這樣一來(lái)，一層層都是被內(nèi)容撐開，也就沒有出現(xiàn)滾動(dòng)條了，這樣似乎是符合規(guī)范預(yù)期的。

在 chromium 的 issue 反饋中，有人提到了這個(gè)問(wèn)題( https://bugs.chromium.org/p/chromium/issues/detail?id=927066 )，根據(jù)回復(fù)，這正是官方為了讓 Chrome 更加符合規(guī)范行為而做的調(diào)整。也就是說(shuō)，Chrome72 之前的版本，這算是一個(gè)沒有按照規(guī)范行為而出現(xiàn)的 bug。新的調(diào)整，其實(shí)就是讓 flex 彈性盒子的子元素最小高度的默認(rèn)行為應(yīng)用 min-height:min-content ，就像官方回復(fù)中提到的那樣，讓子元素作為 flex 彈性盒子時(shí)卻和普通盒子處理方式不同是會(huì)讓人困惑的。

解決方法

既然知道了原因，那么如果我們還想使用這樣的布局方式，該怎么做呢？

對(duì)的，我們給 item 指定一個(gè)最小高度，讓它不使用默認(rèn)的行為(即內(nèi)容的高度)，一般我們指定最小高度為0 min-height:0。給 item 加上這個(gè)樣式后，我們?cè)倏匆幌滦Ч?#xff1a;

嗯，已經(jīng)符合我們的預(yù)期了。為了驗(yàn)證規(guī)范中提到的對(duì)主軸方向的行為，我們修改一下代碼，將主軸設(shè)置為水平方向試試，代碼如下：

area item content

效果如下：

看來(lái)主軸為水平方向時(shí)，是符合規(guī)范預(yù)期行為的(Chrome72 及以前的版本都符合)，那么我們給 item 加上一句樣式 min-width:0 ，效果如下：

嗯，是符合我們預(yù)期的。

結(jié)語(yǔ)

好了，現(xiàn)在你已經(jīng)知道是怎么一回事了，可是等等，你說(shuō)你升級(jí)到Chrome72沒有發(fā)現(xiàn)我說(shuō)的問(wèn)題？

那是因?yàn)楣俜阶⒁獾竭@個(gè)修改會(huì)影響到一些網(wǎng)站的正常顯示，因此在 2019 年 2 月 6 日(正是春節(jié)假期間)發(fā)布的 Chrome72.0.3626.96 中，將這個(gè)問(wèn)題還原回以前的行為了( https://chromium.googlesource.com/chromium/src/+/032ef9666487db1d04b656a095b041de8c6d2b63 )。

官方的意思是為了避免這個(gè)修改給某些網(wǎng)站帶來(lái)的不好的影響，因此預(yù)留時(shí)間給大家修改，等到Chrome73將會(huì)發(fā)布這一改變。所以為了未來(lái)更好的瀏覽體驗(yàn)，檢查一下你的頁(yè)面吧！

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的flex 换主轴后子元素占满_Chrome72 嵌套 flex 布局修改，你的网站可能会发生布局错乱...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。