根本原因是box-sizing: content-box，flex容器按此计算子项基础尺寸，padding和border额外叠加导致总宽溢出；解决方法是显式给子项设box-sizing: border-box并配合min-width: 0、gap替代margin、检查computed值确认生效。
Flex子项加padding后总宽度超父容器，根本原因是box-sizing: content-box
Flex容器不会因为子项有padding就自动压缩内容区——它按默认的box-sizing: content-box计算基础尺寸，padding和border全算“额外加在内容区外面”。比如一个flex: 1子项设了width: 50%和padding: 12px，浏览器先分50%空间给“内容区”，再往里加24px，结果必然溢出。
这不是Flex的bug，是盒模型原始设计逻辑。解决它最直接的一步，就是让width包含padding和border，也就是切换到border-box模式。
必须显式给Flex子项加box-sizing: border-box，不能只靠全局重置
即使你写了*, *::before, *::after { box-sizing: border-box; }，仍可能失效——尤其当第三方UI库（如Ant Design、Element Plus）的组件内部样式优先级更高，或某些框架动态插入的节点没被覆盖时。
实操建议：
- 对关键Flex子项单独加：
.flex-item { box-sizing: border-box; padding: 16px; } - 如果用
flex: 1或flex-basis，务必同步加min-width: 0（否则IE/旧Chrome下可能不收缩） - 检查DevTools「Computed」面板，确认目标元素的
box-sizing值确实是border-box，而不是被其他规则覆盖 - 避免在同一个子项上同时写
width: 100%和flex: 1，这会触发尺寸冲突，box-sizing也救不了
gap比margin更安全，别用margin制造间隙
box-sizing: border-box管不了margin——子项加margin: 10px照样会让总宽度多出20px，且Flex不为此调整分配逻辑。
正确做法是用gap替代子项之间的margin：
- 给Flex容器加
gap: 12px，所有子项自动获得等距间隙，不参与尺寸计算 - 如果要兼容IE或老版Safari（
gap支持度低于95%），可用margin-left+:first-child { margin-left: 0; }兜底，但不如gap干净 - 不要把
padding和margin混着用：比如父容器padding: 16px，子项又margin: 8px，视觉间距变成24px，但总占用还是32px，极易错判
box-sizing生效后仍溢出？重点排查这三处
加了box-sizing: border-box还溢出，大概率不是盒模型问题，而是布局逻辑或渲染层干扰：
- 父容器用了
width: 100vw+padding：100vw是视口宽，加padding后必然超；应改用width: 100%并确保父容器有明确content width - 子元素内含未约束的图片或文本：
img没设max-width: 100%，或white-space: nowrap导致长单词撑开 - 使用了
transform: scale()或zoom：它们放大视觉尺寸但不改变布局盒，DevTools里看「Layout Width」正常，但实际渲染溢出
真正要注意的是：box-sizing只是修正单个元素的尺寸归属，它不替你做布局决策。Flex项是否收缩、Grid轨道如何分配、响应式断点在哪生效——这些还得靠min-width、flex-shrink、grid-template-columns来协同控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
