关于这个Flex布局，请大家帮忙分析下?
图中 一个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的调试更好一些，题主可以试试用火狐看
如图，你会发现有个“最小尺寸” 英文Minimum Size，所以4个div不会收缩mdn中可见https://developer.mozilla.org/en-US/docs/Web/CSS/flex#initial
It shrinks to its minimum size to fit the container
关于为什么会有这个Minimum Size请研究https://drafts.csswg.org/css-flexbox/#min-size-auto规范的这块部分。我看了一会，并没有看明白。。。可以搜索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://www.bigbinary.com/blog/understanding-the-automatic-mi...https://fantasai.inkedblade.net/style/discuss/flexbox-min-size/https://firefox-source-docs.mozilla.org/devtools-user/page_in...
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...
调试css真的是个黑盒，里边老多变量的值和逻辑都是不展示出来的。只能看规范猜。等有时间了研究一下chromium的css渲染实现
- 经过验证的有效解决办法
- 自己的经验指引，对解决问题有帮助
- 遵循 Markdown 语法排版，代码语义正确
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容