为什么嵌套flex布局中的内层元素会出现宽度溢出的问题？

溢出原因 #

该问题由flex布局默认的min-width: auto规则和嵌套flex容器的宽度计算逻辑共同导致，核心逻辑如下：

• flex容器的直接子项（flex item）默认min-width属性值为auto，该规则要求flex子项的宽度不能小于其内部内容的最小宽度，避免内容被强制截断。
• 外层.wrapper是flex容器，唯一直接子项为.box，因此.box属于flex子项，会触发min-width: auto规则。
• 内层.box本身也是flex容器，你为它的所有直接子项设置了flex: 0 0 auto，意味着这些子项不会主动收缩、宽度完全由自身内容决定。而第一个子项内部的.width设置了固定宽度，该宽度会被计算为.box的最小内容宽度，最终导致.box的最小宽度超过父容器可用空间，出现溢出。

修改方案生效的原因 #

1. 将.width的宽度设置为auto时，.width的宽度会由上层容器的可用空间决定，不再传递固定的最小内容宽度，.box的min-width计算值不会超过父容器范围，溢出消失。
2. 移除.wrapper的display: flex属性时，.box不再是flex子项，不会触发min-width: auto规则，块级元素默认占满父容器宽度，内部flex子项会遵守max-width: 50%的限制，布局恢复正常。

可选修复方案 #

如果不需要修改现有结构和宽度配置，仅需给.box添加min-width: 0属性，主动覆盖flex子项默认的min-width: auto规则，即可解决溢出问题。

内容的提问来源于stack exchange，提问作者Anton