关于这个Flex布局，请大家帮忙分析下?-灵析社区
云卿山手[演示Demo](https://codepen.io/ZJRui/pen/vYboEmq) 图中 一个flex容器内部有四个div元素， div内部的img的宽度设置为100px。 默认情况下flex-wrap=nowrap flex子项会一行显示且不允许换行，因此可能会出现宽度溢出的问题。 ## 问题1 “因此可能会出现宽度溢出的问题” ： 这个宽度溢出应该也是有 条件的吧？ 虽然flex子项的累计宽度大于flex容器，但是默认情况下 flex子项是允许收缩的。 如果收缩以后还是超出flex容器的宽度，那才会出现溢出。 我的这个理解对吗？ ## 问题2 基于问题1， 上面的四个flex 子项div， 为什么他们没有收缩 适应fle容器的宽度，而是选择了溢出？ flex子项他们有最小宽度限制吗？ 我看div和img的min-width都是0px，并没有最小宽度限制。 ## 问题3 为什么css 中设置了 img { max-width: 100%; } 就能让四个图片收缩到 适应flex容器的宽度，而不会出现溢出的情况。 b
刘一抗二二首先，我发现Firefox对于flex的调试更好一些，题主可以试试用火狐看
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241015/2de7385b1b076cd03c0f64e429e9742f.png)
如图，你会发现有个“最小尺寸” 英文Minimum Size，所以4个div不会收缩
mdn中可见"https://developer.mozilla.org/en-US/docs/Web/CSS/flex#initial" (https://link.segmentfault.com/?enc=WWV9BmAdmmESx6v7UbmhBw%3D%3D.pxevjB7%2FZXLM0IY%2FahJXxBqL8CPCcLeRts6KKTGdzeZHFtyCnRq%2F8rNddvBMVWa2q6p5Wx0wbLxEcrw5nsFC7g%3D%3D)
«It shrinks to its minimum size to fit the container»
关于为什么会有这个Minimum Size
请研究"https://drafts.csswg.org/css-flexbox/#min-size-auto" (https://link.segmentfault.com/?enc=lBYRst%2FRaEhie%2FjbjzOEFg%3D%3D.lksC3guaMC%2FFfsrz85g%2FbKN6cWtlevTvL%2FUjx3iutXgtUnzFysm6oRhnXkwtOIw3oimAiBTgHHPjULSBtY1yJA%3D%3D)
规范的这块部分。我看了一会，并没有看明白。。。
可以搜索min-content Minimum Size研究一下
不过可以断定的是，~~min-width是0px只是个computed计算里显示的值~~ ，如果你手动指定min-width为0px，就会收缩了。我记得我曾经也碰见过一个类似问题，将computed里显示的默认值变成手动设置的css代码，效果就不一样了。
参考
"https://medium.com/the-crazy-coder/the-mystery-of-css-flex-la..." (https://link.segmentfault.com/?enc=k3eAg7msgYVjLMwB9B%2BSWQ%3D%3D.H2AmxnhS0J81oMVDQIDt%2BcuLeaKQiSus1v5iUc0DmIfr7VVH7pR7FysRIoHofWa7o%2BUkWdWCzgxGqnMTbmSD6kjxMo97NiJzag6wtQBbJO1x7QOKhp3qUyWIWsFaiTuL)
"https://www.bigbinary.com/blog/understanding-the-automatic-mi..." (https://link.segmentfault.com/?enc=F5N1HFMVOOjBT2OAyGzhAA%3D%3D.Sek8kJXszZKHp7aX2K6BaJOdXtGmFSDfIpTt%2BEWPH%2BsxcDkmwJXSN%2B4mUKdia0ZPnpiYWyJMCq8MRw4IT3s0W%2FPtU7ORxm%2Bpvep6nkG6WuBpk7ay4byg8DI4p%2BIB5tNv)
"https://fantasai.inkedblade.net/style/discuss/flexbox-min-size/" (https://link.segmentfault.com/?enc=SiPiXNtGgDHR8eSYKvQzvg%3D%3D.3CFSfBlofiHmT0o3oslmMMZGSFlxWQFOOVpc2LaQqRys2CqpXHZXVGK0zBeFHvkI3h%2BCQMaBP2M6Ujhoi9fIww%3D%3D)
"https://firefox-source-docs.mozilla.org/devtools-user/page_in..." (https://link.segmentfault.com/?enc=iIoukf%2Fpo%2BDrHNticszE7w%3D%3D.kvorojG5ofvUEgg%2F07xlMbPlQKN9kBrigu4DW%2FGuaNHIu13Xl9P8E2%2BzJIx0OfCQJNEMFWJCrK%2BwnA555GobTrQCkKAl1A3Hc6OX4Grtcn5xVq7S6%2FawJ6kWPE9UtX46hzCOT1mhs%2Bf2pdrPPFGCrw%3D%3D)
«The second reason is that flexbox prevents small items from shrinking to
zero size during this removal of negative free space. The items will be
floored at their min-content size — the size that they become if they take
advantage of any soft wrapping opportunities available to them.
"https://developer.mozilla.org/en-> US/docs/Web/CSS/CSS_flexible..." (https://link.segmentfault.com/?enc=bW1AQh8lBj%2F7TA9uH%2BO92Q%3D%3D.3Y%2FM4KIXIMBQZAShhDz1JB9vXNm0l4O06sxkQnzKC9QLOF3N0DOYpxuxjoUSa2rSnpXohJLxgxVAzLz4O3p2BNx9gCR32DngEyQLFXp%2FZ9OFPLpwxyllbtdrAkhq2eRiluvFSf4NsDkShvQFZbNWxzg8edup2UUbeWXVJySs2nY%3D)»
***
调试css真的是个黑盒，里边老多变量的值和逻辑都是不展示出来的。只能看规范猜。等有时间了研究一下chromium的css渲染实现