flex子项加padding撑开容器是因box-sizing: content-box默认值导致，解决需在子项设box-sizing: border-box和min-width: 0，并用gap替代margin，再通过computed面板验证生效。
Flex子项加了padding就撑开容器，不是Flex有问题，而是浏览器按box-sizing: content-box（默认值）算尺寸：你写的width只管内容区，padding和border额外加在外面。
box-sizing: border-box 能不能直接解决？
能，但必须加在子项上，且得确认它真生效了。
-
box-sizing: border-box让width变成“边框盒总宽”，padding会向内压缩内容区，不再额外撑出 - 全局重置
* { box-sizing: border-box; }方便，但容易被第三方库（如.ant-btn）用更具体选择器覆盖 - 关键子项建议单独加固：
.flex-item { box-sizing: border-box; padding: 12px; } - 务必进 DevTools →「Computed」面板查
box-sizing值是否为border-box，不能只看 Styles 面板有没有那行代码
为什么加了 border-box 还是溢出？
常见原因不在盒模型本身，而在三个容易被忽略的点：
- 子项含未约束的替换元素：
<img>没设max-width: 100%，或<video></video>没配width: 100%+height: auto - 文本无空格或
white-space: nowrap导致长串字符撑开，此时需配合min-width: 0+overflow: hidden+text-overflow: ellipsis - 父容器用了
width: 100vw——100vw是视口宽度，加上padding后必然超；应改用width: 100%并确保其父级有明确 content width
gap 和 margin 混用会放大问题
gap本身不加宽容器，但它会暴露box-sizing没设好的问题；而margin完全不受盒模型控制，和padding叠加后更容易溢出。
-
gap: 12px是容器级属性，间隙不参与子项尺寸计算，推荐优先使用 - 别给子项写
margin-right: 12px来模拟间隙——哪怕box-sizing: border-box已生效，margin照样多占空间，还可能和gap形成双重间隙 - 如果必须兼容老浏览器，可用
.flex-item:not(:first-child) { margin-left: 12px; }兜底，但要删掉容器的gap
flex: 1 子项必须配 min-width: 0
即使box-sizing: border-box生效，flex: 1子项仍可能因默认min-width: auto拒绝收缩，尤其含长文本或<input>时。
-
min-width: 0必须加在 Flex 容器的**直接子元素**上，写错层级等于白写 -
<input>类替换元素还需在自身也加min-width: 0，否则 UA 默认最小宽度（如 Chrome 的 ~13ch）依然生效 - 若子项内部还有嵌套 Flex，内层容器也得单独加
min-width: 0 - 调试时务必在 DevTools 的「Computed」面板确认
min-width真实值是否为0px
真正麻烦的从来不是padding本身，而是它和flex-basis、min-width、margin混在一起时，浏览器按不同规则分阶段计算，人脑很难同步追踪每一步。最稳妥的做法是：子项显式设box-sizing: border-box + min-width: 0，容器用gap，所有margin删干净——然后进 Computed 面板逐项验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
