根本原因是flex-basis:100%仅设内容区宽度，而box-sizing:content-box下padding/border额外叠加导致总宽超100%；即使设border-box，margin、父容器未约束宽度、flex-grow二次拉伸或伪元素覆盖等仍会引发溢出。
flex-basis: 100% 为什么还是撑破容器
根本原因不是 flex-basis 本身，而是它计算出的“基础尺寸”仍要叠加 padding 和 border —— 默认 box-sizing: content-box 下，flex-basis: 100% 只管内容区宽度，左右 padding 会额外加在两边，总宽 = 100% + 左右 padding，必然溢出。
为什么只加 box-sizing: border-box 还不够
加了 box-sizing: border-box 能收住 padding 和 border，但以下情况仍会溢出：
-
margin不受box-sizing影响，子项间用margin-right分隔时，每项都多占空间 - 父容器没设
width: 100%或max-width: 100%，导致flex-basis: 100%计算基准偏大 - 子项同时写了
flex: 1和flex-basis: 100%，flex-grow可能二次拉伸 - 伪元素（如
::before）或第三方库样式覆盖了你的box-sizing设置
怎么快速确认是不是 box-sizing 没生效
打开浏览器开发者工具，选中该元素，在「Computed」面板里搜索 box-sizing，看最终值是不是 border-box。如果不是，说明被其他规则覆盖了，常见干扰源有：
- 某些 UI 库（如 Ant Design）显式重置为
content-box - 全局重置写成了
* { box-sizing: border-box; }，但漏了*::before, *::after - 你写的规则优先级不够，比如用了类选择器，却被 ID 选择器覆盖
稳妥写法：从源头堵死溢出路径
不要只靠单个属性救火，组合使用才能稳：
- 给所有 Flex 子项统一加：
box-sizing: border-box - 用
gap替代子项margin（.container { gap: 8px; }），避免 margin 累加 - 父容器加
width: 100%; max-width: 100%，锁死计算基准 - 若必须用
margin，把它的值纳入calc()：比如flex-basis: calc(100% - 16px)（对应左右各 8px margin）
真正容易被忽略的是：Flex 容器不会主动“压缩”子项来容纳它们的 padding/margin，它只是按你写的 flex-basis 分配空间，然后原样渲染——溢出不报错，只悄悄滚动或错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
