box-sizing: border-box 必须显式设置以使 width 包含 padding，全局重置需覆盖伪元素，flex 溢出主因是未约束替换元素、文本不折行或误用 margin；应优先用 gap，关键子项加 min-width: 0 触发 flex-shrink。
因为浏览器默认用 box-sizing: content-box，padding 是加在你写的 width 外面的，不是从里面扣的——Flex 容器只按这个“基础尺寸”分配空间，不会自动压缩内容区去容纳内边距。
box-sizing: border-box 为什么必须显式设置？
它能把 width 的含义从“内容宽”改成“边框盒总宽”，让 padding 向内挤，不额外撑开。但要注意：
- 全局重置
* { box-sizing: border-box; }不保险：Ant Design、Bootstrap 等库可能用更高优先级规则覆盖子项或伪元素 - 必须连同
*::before, *::after一起设，否则伪元素仍走content-box - 关键子项建议单独加固：
.flex-item { box-sizing: border-box; padding: 12px; } - 进 DevTools 的「Computed」面板确认值真是
border-box，不能只看 Styles 面板有没有那行代码
加了 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：视口宽 + 内边距必超，应改用width: 100%并确保其父级有明确 content width
别用 margin 做间隙，gap 才是 Flex 场景的正解
box-sizing: border-box 不管 margin。子项写 margin-right: 12px，照样让总宽度多出 12px，Flex 也不会为此调整分配逻辑。
- 正确做法：给 Flex 容器加
gap: 12px，所有子项自动获得等距间隙，且不参与尺寸计算 - 旧版 Safari（≤14.1）不支持
gap，可降级用margin+justify-content: space-between，但要同步加min-width: 0防止 flex-shrink 失效 - 若用
margin，记得用:first-child/:last-child清除首尾多余外边距
最常被忽略的是：即使 box-sizing 和 gap 都设对了，只要文本子项没加 min-width: 0，浏览器就仍按最长不可折行片段锁死最小宽度——这时你看到的“溢出”，其实是 flex-shrink 根本没启动，而不是样式写错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
