【CSS】1068- Flex布局中一个不为人知的特性

清疚 2022-09-10 00:25 154阅读 0赞

关于本文要说的这个特性，我之前也不清楚，还是遇到问题之后，阅读规范才知道的，故事是下面这样的：

某日被告知有一个bug：在网页宽度较小时，发现 `Flex` 容器被子元素撑大导致UI显示异常的问题，如下：

![46974f953bb2196e933c92b1961f59aa.png][]

这是什么鬼...我期待它不管什么时候都能像下面这样显示（不撑破父容器）：

![f2389821a896471c79f8e46fe60b1f29.png][]

我开始一顿操作猛如虎，各种审查元素样式，恕我愚钝，并没有看出什么问题，看起来似乎都很正确的样子....

当然，浏览器是不会骗我的，虽然，不知道哪里出了问题，但是这并不影响我修复这个问题。我试了试，发现加个 `flex` 容器加个 `overflow:hidden` 属性之后，完美解决问题。然后又试了试，发现加 `min-width: 0` 也可以解决这个问题。

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

![5be039b837c18156880f99178f63b67c.png][]

想来我非常普通的CSS水平可能无法解开这一难题，于是我开始思考朋友圈哪位大佬对CSS颇有研究，于是我就写了个最简的Demo，然后微信去请教了下大佬，大佬跟我说：原理说起来可就复杂了，然后分享我一篇文章链接。我看完之后，发现对我的问题并没有一个非常好的解释，于是又继续厚着脸皮问了，大佬说这块可能他也没有覆盖到。

好嘛，毕竟是周五，也不好一直骚扰大佬，于是，我就继续自己寻找答案。其实写最简Demo的时候，我发现了一个小小问题，那就是：其实这个问题出现在 `Flex` 嵌套之中，如果不是嵌套的话，那么 `Flex` 容器并不会被 `Flex` 的项目撑破。可以戳这个查看最简Demo：https://codepen.io/yvettelau/pen/OJWMdoM?editors=1100

![d5d5de8a0db6bb77dbb59269838d5f12.png][]

如果我们删除掉 `div class=main` 那一层，那么表现良好，即每个 `item` 都按照预期缩小了。

![7fa224ff8cc0a1cd1079b972cb939cab.png][]

然鹅，还是不知道原因吖，搜索引擎找了一番也没找到什么有说服力的答案，于是，我决定研究一下 `flex` 的规范（https://www.w3.org/TR/css-flexbox-1/\#min-size-auto），看到如下一段话：

![44e7b78dd447307fd5de2e4c40c6f96a.png][]

通过阅读标准，可以发现：

在非滚动容器中，主轴方向`Flex Item` 的最小尺寸是基于内容的最小尺寸，此时 `min-width` 的值是 `auto`。对于滚动容器，`min-width` 的值是 0（默认讨论水平布局）

读到这里，我意识到这个问题跟Flex嵌套应该没什么关系，不嵌套应该也一样存在这个问题，于是我又新写了个demo，可以戳这个查看：https://codepen.io/yvettelau/pen/poRgYPK?editors=1100

![c303fa4c9f3ffc6be9ab2c895334cf38.png][]

当 `item` 的内容 `child` 宽度是250px时，此时也不能按照预期缩小。可能这个时候，第一反应是给 `item` 加 `flex-shrink`，然而并木有用。—— 当 `min-width`是 `auto` 时，其最小尺寸是基于内容的，加 `flex-shrink` 是没有作用的。

这个时候就乖乖按照规范教的操作吧，例如，我们给 `item` 设置 `min-width:0` ，这个时候，`item` 会按照预期缩小，平分500px的大小。

![b0ca64024a5c11a8c3436c44a1616f84.png][]

另外，规范也说明了在滚动容器中，`min-width` 也是0，所以，给 `item` 增加 `overflow: auto` 或者 `overflow: hidden` 也一样可以达到目的。

现在，我们再回过头来看文章最开始的问题。看起来是 `Flex` 嵌套导致的问题，其实是因为嵌套在里面的 `div` ，它不仅仅是 `Flex` 容器，同时它也是一个 `Flex Item`。因此，我们可以给它加上 `overflow: hidden` 或者是 `min-width: 0` 来阻止它撑破父容器。

最后的最后，吐槽一句，CSS真是太复杂了...

参考链接:

1.  https://www.w3.org/TR/css-flexbox-1/\#transferred-size-suggestion
2.  还有一个忘记保存链接的stackflow

![2c675b5d9280fd4cdce4bbc2ee6a01b4.gif][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 120[\+篇原创系列汇总][Link 1]

![7fca673a285b4f72bafe02bff334da51.gif][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 120+ 篇原创文章

[46974f953bb2196e933c92b1961f59aa.png]: /images/20220829/8fa8f27aea4a409b9a2215bdbee46f97.png
[f2389821a896471c79f8e46fe60b1f29.png]: /images/20220829/689aae05567f4f1abe2823d0e6f69aee.png
[5be039b837c18156880f99178f63b67c.png]: /images/20220829/046ff051b10746e98b04f475db3638c2.png
[d5d5de8a0db6bb77dbb59269838d5f12.png]: /images/20220829/28985fefac91428ca3d5444165af616a.png
[7fa224ff8cc0a1cd1079b972cb939cab.png]: /images/20220829/3cd77cbeb935494e9d2243de9956f06b.png
[44e7b78dd447307fd5de2e4c40c6f96a.png]: /images/20220829/ddbb51dd796840aeb05e0b1f15ea9761.png
[c303fa4c9f3ffc6be9ab2c895334cf38.png]: /images/20220829/694faf4ea22b4af59efffac8b9df0d5a.png
[b0ca64024a5c11a8c3436c44a1616f84.png]: /images/20220829/9cf176488e6c48559867a930a0533332.png
[2c675b5d9280fd4cdce4bbc2ee6a01b4.gif]: /images/20220829/d83cd1b680c645d290d4c65b9e64ba3c.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[7fca673a285b4f72bafe02bff334da51.gif]: /images/20220829/d7e4586104a548e081f55347b9ca894c.png