[[433102]]

 今天給大家帶來一個 Flex 下極容易被忽視的一個細節點。

正文從下面開始~

關于本文要說的這個特性，我之前也不清楚，還是遇到問題之后，閱讀規范才知道的，故事是下面這樣的：

某日被告知有一個bug：在網頁寬度較小時，發現 Flex 容器被子元素撐大導致UI顯示異常的問題，如下：

這是什么鬼...我期待它不管什么時候都能像下面這樣顯示（不撐破父容器）：

我開始一頓操作猛如虎，各種審查元素樣式，恕我愚鈍，并沒有看出什么問題，看起來似乎都很正確的樣子....

當然，瀏覽器是不會騙我的，雖然，不知道哪里出了問題，但是這并不影響我修復這個問題。我試了試，發現加個 flex 容器加個 overflow:hidden 屬性之后，完美解決問題。然后又試了試，發現加 min-width: 0 也可以解決這個問題。

bug 改好了，但是不知道為什么加個 overflow:hidden 或者 min-width: 0 就好了。

[[433105]]

想來我非常普通的CSS水平可能無法解開這一難題，于是我開始思考朋友圈哪位大佬對CSS頗有研究，于是我就寫了個最簡的Demo，然后微信去請教了下大佬，大佬跟我說：原理說起來可就復雜了，然后分享我一篇文章鏈接。我看完之后，發現對我的問題并沒有一個非常好的解釋，于是又繼續厚著臉皮問了，大佬說這塊可能他也沒有覆蓋到。

好嘛，畢竟是周五，也不好一直騷擾大佬，于是，我就繼續自己尋找答案。其實寫最簡Demo的時候，我發現了一個小小問題，那就是：其實這個問題出現在 Flex 嵌套之中，如果不是嵌套的話，那么 Flex 容器并不會被 Flex 的項目撐破。

可以戳這個查看最簡Demo：

https://codepen.io/yvettelau/pen/OJWMdoM?editors=1100

如果我們刪除掉 div class=main 那一層，那么表現良好，即每個 item 都按照預期縮小了。

然鵝，還是不知道原因吖，搜索引擎找了一番也沒找到什么有說服力的答案，于是，我決定研究一下 flex 的規范（https://www.w3.org/TR/css-flexbox-1/#min-size-auto），看到如下一段話：

通過閱讀標準，可以發現：

在非滾動容器中，主軸方向Flex Item 的最小尺寸是基于內容的最小尺寸，此時 min-width 的值是 auto。對于滾動容器，min-width 的值是 0（默認討論水平布局）

讀到這里，我意識到這個問題跟Flex嵌套應該沒什么關系，不嵌套應該也一樣存在這個問題，于是我又新寫了個demo，可以戳這個查看：https://codepen.io/yvettelau/pen/poRgYPK?editors=1100

當 item 的內容 child 寬度是250px時，此時也不能按照預期縮小。可能這個時候，第一反應是給 item 加 flex-shrink，然而并木有用。—— 當 min-width是 auto 時，其最小尺寸是基于內容的，加 flex-shrink 是沒有作用的。

這個時候就乖乖按照規范教的操作吧，例如，我們給 item 設置 min-width:0 ，這個時候，item 會按照預期縮小，平分500px的大小。

另外，規范也說明了在滾動容器中，min-width 也是0，所以，給 item 增加 overflow: auto 或者 overflow: hidden 也一樣可以達到目的。

現在，我們再回過頭來看文章最開始的問題。看起來是 Flex 嵌套導致的問題，其實是因為嵌套在里面的 div ，它不僅僅是 Flex 容器，同時它也是一個 Flex Item。因此，我們可以給它加上 overflow: hidden 或者是 min-width: 0 來阻止它撐破父容器。

最后的最后，吐槽一句，CSS真是太復雜了...