Flex项目加padding后撑开容器是因box-sizing:content-box默认行为，padding在width外计算；改用box-sizing:border-box可解决，但需显式设置并验证生效，同时注意替换元素、文本溢出、vw单位及margin误用等问题。
Flex 项目加 padding 后撑开容器，不是 Flex 的 bug，而是浏览器按默认 box-sizing: content-box 计算尺寸的结果——padding 是加在你写的 width 外面的，不是从里面扣的。
为什么 padding 会让 Flex 子项“变宽”
你写 width: 100%; 和 padding: 12px;，浏览器实际渲染宽度是：内容区 100% + 左右 padding（共 24px）。Flex 容器分配空间时只管“基础尺寸”，并不自动压缩内容区来容纳内边距。
- 常见翻车场景：
flex: 1子项设了padding，结果挤占相邻子项空间 - 父容器
width: 100%，子项width: 100%; padding: 16px;→ 实际超宽，触发横向滚动 -
flex-basis: auto（即flex: 1默认行为）下，浏览器先按内容宽度计算，再加padding，放大效应更明显
box-sizing: border-box 能解决吗？怎么用才真正生效
能，但必须显式加在 Flex 子项上，且要确认没被覆盖。它把 width 的含义从“内容宽”改成“边框盒总宽”，padding 就会向内压缩，不再额外撑开。
- 全局重置常用但不保险：
* { box-sizing: border-box; }可能被第三方库（如 Ant Design 的.ant-btn）显式覆盖 - 关键子项建议单独加固：
.flex-item { box-sizing: border-box; padding: 12px; } - 务必进 DevTools 的「Computed」面板查
box-sizing值是否为border-box，不能只看 Styles 面板有没有那行代码 -
min-width和max-width也走border-box规则，别只改width忘了它们
加了 border-box 还撑开？重点排查这三处
如果 box-sizing: border-box 已确认生效，但依然溢出，问题大概率不在盒模型本身：
立即学习“前端免费学习笔记（深入）”；
- 子项内含未约束的替换元素：
img没设max-width: 100%，或video没配width: 100%; height: auto; - 文本无空格或
white-space: nowrap导致长串字符撑开，此时需配合min-width: 0+overflow: hidden+text-overflow: ellipsis - 父容器用了
width: 100vw——100vw是视口宽，加上padding后必然超；应改用width: 100%并确保其父级有明确 content width
别用 margin 制造间隙，gap 才是 Flex 场景的正确解
box-sizing: border-box 不管 margin。子项写 margin-right: 12px，照样让总宽度多出 12px，Flex 也不会为此调整分配逻辑。
- 正确做法：给 Flex 容器加
gap: 12px，所有子项自动获得等距间隙，且不参与尺寸计算 - 兼容性兜底（IE / 老 Safari）：
.flex-item:not(:first-child) { margin-left: 12px; }，但不如gap干净 - 避免混用：父容器
padding: 16px+ 子项margin: 8px→ 视觉间距 24px，但总占用仍是 32px，极易错判
真正麻烦的从来不是 padding 本身，而是它和 flex-basis、min-width: auto、display: inline 等规则混在一起时，人脑没记住浏览器到底按哪条规则算的——得靠 DevTools 的 Computed 面板实锤，而不是靠猜。
