flex-basis: 100%仅设内容区宽度，不包含padding和border；即使设box-sizing: border-box，margin、父容器未约束宽度、flex-grow二次拉伸或伪元素覆盖等仍会导致溢出。
flex-basis: 100% 的计算基准不含 padding
它只管“内容区宽度”，不是最终渲染总宽。默认 box-sizing: content-box 下，flex-basis: 100% 算出的是父容器主轴尺寸的内容部分，然后 padding 和 border 会额外加在两边——结果就是总宽 = 100% + 左右 padding + 左右 border。
为什么加了 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。如果不是，常见干扰源有：
- 全局重置漏了
*::before, *::after，导致伪元素仍是content-box - 你写的规则优先级不够，比如类选择器被 ID 选择器覆盖
- 某些 UI 库（如旧版 Bootstrap 插件）显式重设了
box-sizing: content-box
真正稳的写法：组合控制而非单点修复
别只靠 box-sizing 救火，这几个动作要一起做：
- 给所有 Flex 子项统一加
box-sizing: border-box - 用
gap替代子项margin（.container { gap: 8px; }），避免 margin 累加 - 父容器加
width: 100%; max-width: 100%，锁死flex-basis计算基准 - 若必须用 margin，把它的值纳入
calc()：比如flex-basis: calc(100% - 16px)（对应左右各 8px margin）
Flex 容器不会主动压缩子项来容纳 padding/margin，它只是按你写的 flex-basis 分配空间，然后原样渲染——溢出不报错，只悄悄滚动或错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
