Flex子项width:100%溢出主因是box-sizing:content-box且未设min-width:0；需确认computed值为border-box，父容器设width/max-width，并统一用flex-basis:100%、禁用flex-grow或补min-width:0。

Flex子项width:100%溢出，先看box-sizing是不是content-box

Flex容器里子元素写了width: 100%却撑破父容器，90%是因为它仍用着默认的box-sizing: content-box。此时width: 100%只管内容区，左右padding和border会额外加在两边——哪怕父容器宽320px，子项设了padding: 12px，实际就占了344px。

别信代码里写了box-sizing: border-box就生效。打开开发者工具，选中该子项，在「Computed」面板里搜box-sizing，确认值真是border-box。常见失效场景：

• 第三方UI库（如Ant Design）显式把input重置回content-box
• 全局重置漏了伪元素：* { box-sizing: border-box; }不等于*::before, *::after也生效
• 你的样式优先级不够，被ID选择器或!important覆盖

flex-basis:100%和width:100%在Flex里不是一回事

很多人以为flex-basis: 100%等价于width: 100%，其实它们计算时机不同：前者是Flex分配空间的初始依据，后者是渲染时的最终宽度。但两者都受box-sizing影响——content-box下，它们都只算内容区，padding照常外溢。

更麻烦的是，如果子项同时写了flex: 1和flex-basis: 100%，flex-grow可能二次拉伸，让本已收紧的宽度又超出去。实操建议：

立即学习“前端免费学习笔记（深入）”；

• 统一用flex-basis: 100%替代width: 100%，更符合Flex语义
• 禁用二次拉伸：flex: none 或 flex-grow: 0
• 若必须保留flex: 1，请确保父容器有明确width或max-width，避免基准失真

Flex容器本身没约束宽度，子项100%就失去参照系

Flex子项的width: 100%或flex-basis: 100%，是相对于**父Flex容器的内容区宽度**计算的。如果父容器没设width、max-width，或者它的宽度由内容撑开（比如没加width: 100%），那这个“100%”就可能远超视口。

典型表现：嵌套Flex中，外层容器没设width，内层子项width: 100%后横向滚动条突然出现。解决方式很直接：

• 给父Flex容器加width: 100%或max-width: 100%
• 移动端优先用width: 100vw，避开父级继承链断裂
• 临时调试时，在父容器上加outline: 1px solid red，一眼看出是否“凸出来”

min-width: 0才是Flex子项不溢出的真正守门员

box-sizing: border-box能收住padding和border，但对min-width无能为力。而Flex子项默认min-width: auto（尤其img、input等替换元素），意味着它宁可撑破容器，也不愿缩小到内容以下。

这就是为什么你加了box-sizing: border-box，还是看到横向滚动条——子项死守最小宽度，把padding全挤到外面去了。必须补上这一句：

• 所有Flex子项加min-width: 0，强制允许压缩
• 配合overflow: hidden，截断意外溢出的内容
• 若子项含图片或iframe，再加max-width: 100%，防止原始尺寸突破

真正容易被忽略的是：Flex不会主动帮你“减掉padding再缩放”，它只按你写的尺寸分配空间，然后原样渲染。溢出不报错，只悄悄滚动或错位——得靠min-width: 0和box-sizing: border-box双保险才稳。