box-sizing: content-box是溢出根源，因width和flex-basis仅指内容区，padding和border额外叠加导致总宽超父容器；必须显式设border-box并验证生效，配合min-width: 0、gap替代margin。
box-sizing: content-box 是溢出的根源
Flex 子元素默认用 box-sizing: content-box，你写的 width 或 flex-basis 只管内容区，padding 和 border 是额外加在它外面的。比如一个 flex: 1 子项设了 padding: 16px，浏览器先按 flex 分配“内容宽度”，再往里塞 32px 的 padding，总宽必然超父容器。
这不是 Flex 的 bug，是盒模型原始逻辑——Flex 容器不为 padding 调整分配基准。
flex: 1 + padding 组合最容易翻车
当子项同时满足 flex: 1 和有 padding 时，溢出概率最高，因为：
-
flex-basis: 0%（flex: 1的默认值）让浏览器从“零宽度”开始分配，但 padding 仍被叠加在最终渲染尺寸上 - 若子项内含
<input>、<button></button>等有 UA 默认min-width的元素，实际基础尺寸更难预测 - 多个子项 padding 值不一致（比如有的写
padding: 12px，有的写padding: 16px 12px），会直接破坏等宽逻辑
box-sizing: border-box 必须显式设置并验证
只靠全局重置 * { box-sizing: border-box; } 不够可靠——Ant Design、Element Plus 等 UI 库常在组件内部显式覆盖为 content-box。
立即学习“前端免费学习笔记（深入）”；
实操要点：
- 对关键 Flex 子项单独加：
.flex-item { box-sizing: border-box; padding: 16px; } - 必须打开 DevTools →「Computed」面板，确认目标元素的
box-sizing值确实是border-box，不能只看「Styles」里有没有那行 CSS - 若用了
flex: 1，同步加min-width: 0（旧版 Chrome/IE 下否则不收缩） -
min-width和max-width同样受border-box影响，别只改width忘了它们
gap 比 margin 更安全，也比 padding 更可控
box-sizing: border-box 对 margin 完全无效——子项写 margin-right: 12px，照样让总宽度多出 12px，Flex 不会为此调整分配逻辑。
正确做法：
- 用
gap替代子项间margin：.container { display: flex; gap: 12px; } - 若需兼容 IE 或老 Safari（
gap支持度 .flex-item:not(:first-child) { margin-left: 12px; } 兜底 - 避免混用：父容器
padding: 16px+ 子项margin: 8px→ 视觉间距变成 24px，但总占用仍是 32px，极易误判布局容量
真正容易被忽略的是：加了 box-sizing: border-box 还溢出，大概率已不是盒模型问题，而是父容器用了 width: 100vw、子项内含未约束的 <img alt="为什么CSS Flex子元素设置padding会导致布局溢出？" > 或 white-space: nowrap 文本——这些得单独排查，border-box 救不了。
