必须为每个 flex 子项显式设置 box-sizing: border-box，否则 padding 和 border 会额外叠加在 flex 分配宽度之外导致溢出；这是 content-box 模式下的标准行为，非 flex bug。
必须显式给每个 Flex 子项设 box-sizing: border-box，否则 padding 和 border 会额外叠加在 flex 分配宽度之外，直接导致总宽溢出——这不是 flex 的 bug，而是 content-box 模式下的标准行为。
为什么 box-sizing: content-box 是溢出元凶
Flex 容器计算子项“基础尺寸”时，完全按 box-sizing: content-box（默认值）来：它只把 width 或 flex-basis 当作内容区宽度，padding 和 border 全部算作额外加在外部的尺寸。比如一个 flex: 1 子项写了 width: 50% 和 padding: 12px，浏览器先分 50% 给内容区，再往里塞 24px 内边距，结果必然超限。
这个逻辑不因 flex 布局而改变，是盒模型底层规则。
-
box-sizing: border-box必须写在子项上，不是容器上 - 全局重置（如
* { box-sizing: border-box }）可能被第三方库样式覆盖，务必用 DevTools 的 Computed 面板确认目标元素的box-sizing真实值是border-box - 若子项同时用了
flex: 1或flex-basis，还得同步加min-width: 0，否则旧版 Chrome/IE 下仍不收缩
gap 替代 margin 才能真正避免间隙溢出
box-sizing: border-box 管不了 margin——子项加 margin: 10px，左右就多占 20px，Flex 不为此调整分配逻辑，总宽照样超。
正确做法是把间隙逻辑上移到容器层：
- 给 Flex 容器加
gap: 8px，所有子项自动获得等距间隙，且gap不参与任何尺寸计算 - 若需兼容 IE 或老 Safari（
gap支持度低于 95%），可用margin-left+:first-child { margin-left: 0 }兜底，但不如gap干净可靠 - 别混用：父容器
padding: 16px+ 子项margin: 8px，视觉间距变成 24px，但总占用仍是 32px，极易误判
加了 box-sizing: border-box 还溢出？该查这三处
此时问题已不在盒模型，而是布局逻辑或渲染干扰：
- 父容器用了
width: 100vw+padding：视口宽加内边距必超，应改用width: 100%并确保其块级祖先有明确 content width - 子元素含未约束的替换元素：
img没设max-width: 100%，或white-space: nowrap导致长单词撑开 - 第三方样式覆盖：Bootstrap 等库可能重置了
box-sizing但漏掉::before/::after，Computed 面板里看真实生效值
最常被跳过的动作，是在 DevTools 里点开 Computed 面板，盯着目标子项的 box-sizing 和 min-width 两个值——只要其中一个是 content-box 或 auto，溢出就还没真正解决。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
