一、問題背景
1、bug 描述
某日被告知有一個bug：在網頁寬度較小時，發現 Flex 容器被子元素撐大導致UI顯示異常的問題，如下
這是什么鬼...我期待它不管什么時候都能像下面這樣顯示（不撐破父容器），就如這樣：
2、問題解決：
我試了試，發現給 flex-item 容器加個overflow:hidden 屬性之后，完美解決問題。
然后又試了試，發現加 min-width: 0 也可以解決這個問題。
二、原因剖析
1、起初我以為這個問題出現在 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），看到如下一段話：
通過閱讀標准，可以發現：
（1）在非滾動容器中，主軸方向 Flex Item 的最小尺寸是基於內容的最小尺寸，此時 min-width 的值是 auto。
（2）對於滾動容器，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 來阻止它撐破父容器。
主要來源文章：https://mp.weixin.qq.com/s/3f2JcwENd78Cv3JBYSr9Eg