今天给大家带来一个在Flex下容易被忽视的细节。正文从下开始~我不知道这篇文章要说的功能。直到我遇到问题并阅读规范时才知道。故事是这样的：有一天被告知有一个bug：当网页宽度较小时，发现flex容器被子元素放大了，导致UI显示异常，如下:这是什么鬼。。。希望随时能像下面这样显示（不破坏父容器）：没有看到任何问题，它们似乎是正确的......当然，浏览器不会骗我，虽然，我不知道出了什么问题，但这并不妨碍我解决问题。我试了一下，发现加一个flex容器，加一个overflow:hidden属性就完美解决了问题。然后又试了一下，发现加上min-width:0也可以解决这个问题。bug修复了，但是不知道为什么加上overflow:hidden或者min-width:0就可以了。心想自己很普通的CSS水平可能解决不了这个问题，于是开始思考朋友圈哪位大佬对CSS研究的比较多，于是写了一个最简单的Demo，然后问了下微信大佬，老大跟我说：原理说起来复杂，然后给我分享一篇文章的链接。看完之后发现对我的问题没有很好的解释，就继续厚着脸皮问。老板说他可能没有覆盖这个区域。嗯，毕竟是周五，一直骚扰老板也不好，于是继续自己找答案。其实在写最简单的demo的时候，发现了一个小问题，就是：这个问题其实是发生在Flex嵌套的时候。如果不嵌套，那么Flex容器就不会被Flex项目破坏。可以点这个查看最简单的Demo：https://codepen.io/yvetelau/pen/OJWMdoM?editors=1100如果我们把divclass=main层去掉，那么性能还是不错的，就是每一项都缩小了不出所料。但是，我仍然不知道原因。在搜索引擎上搜索了一下，没有找到令人信服的答案，于是决定研究一下flex的规范（https://www.w3.org/TR/css-flexbox-1/#min-size-auto），看下面paragraph:通过阅读标准可以发现：在非滚动容器中，FlexItem在主轴方向的最小尺寸是基于内容的最小尺寸。这时，min-width的值为auto。对于滚动容器，min-width的值为0（默认讨论水平布局）。看完之后才明白，这个问题应该和Flex嵌套没有关系。这个问题不嵌套应该也存在，所以我重新写了一个。demo可以点此查看：https://codepen.io/yvetelau/pen/poRgYPK?editors=1100当item的child宽度为250px时，无法按预期收缩。可能这时候，第一反应就是给item加flex-shrink，但是没有用。——当min-width为auto时，它的最小尺寸是根据内容来的，加flex-shrink没有效果。这个时候，乖乖按照说明书教的操作就行了。例如，我们为项目设置min-width:0。这时item会按预期收缩，平分500px的大小。此外，规范中还显示，在滚动容器中，min-width也是0，所以在item中添加overflow:auto或overflow:hidden也可以达到目的。现在，让我们回到文章开头的问题。看起来是Flex嵌套导致的问题，其实是因为嵌套的div不仅是Flex容器，还是FlexItem。因此，我们可以给它加上overflow:hidden或者min-width:0来防止它破坏父容器。最后，在最后吐槽一下，CSS真的太复杂了……
