关于这个Flex布局，请大家帮忙分析下?-灵析社区

首先，我发现Firefox对于flex的调试更好一些，题主可以试试用火狐看  如图，你会发现有个“最小尺寸” 英文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渲染实现