一、问题背景
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