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双保险才稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
