flex容器无需设box-sizing: border-box，真正需设置的是子项；否则padding和border会叠加在flex-basis或width外导致尺寸误算。
Flex容器本身不需要设 box-sizing: border-box，真正要设的是它的子项（flex items）——否则 padding 和 border 仍会叠加在 flex-basis 或 width 之外，导致尺寸误算。
为什么给 Flex 容器设 box-sizing 是无效操作
Flex 容器的宽高由其父容器决定，它只负责分配空间；box-sizing 控制的是“该元素自身宽高的计算逻辑”，而 Flex 容器的布局行为不依赖于自己的 padding/border 是否被包含在 width 内。你给 .container { display: flex; box-sizing: border-box; padding: 16px; } 加上 box-sizing，只是让这个容器自身的总宽度 = 声明的 width + margin，对内部子项的尺寸分配毫无影响。
真正出问题的是子项：比如 .item { flex-basis: 200px; padding: 12px; border: 1px solid; }，在默认 content-box 下，它实际占位是 226px，但 Flex 引擎仍按 200px 分配空间，结果就是溢出、换行或挤压兄弟项。
- Flex 容器的
box-sizing不参与 flex 分配逻辑 - 子项的
box-sizing才决定flex-basis/width是否包含 padding 和 border - 常见误判：看到子项撑破容器，第一反应去调容器，其实该查子项
Flex 子项必须显式设 box-sizing: border-box
这是解决尺寸误算最直接有效的动作。只要子项用了 padding 或 border，就必须加这一行，否则无论你写 flex-basis: 200px 还是 width: 100%，都只是内容区基准，不是真实占位。
典型错误写法：
.item {
flex-basis: 200px;
padding: 12px;
border: 1px solid #ccc;
}
正确写法：
.item {
box-sizing: border-box;
flex-basis: 200px;
padding: 12px;
border: 1px solid #ccc;
}
- 不推荐只靠
flex: 0 0 200px简写来替代 —— 它不改变盒模型，200px仍是 content 区宽度 - 若子项是表单控件（
<button></button>,<input>），iOS Safari 下还需额外加min-width: 1px防止强制最小宽度干扰 - 第三方组件内子项可能漏设，建议用开发者工具检查 “Computed” 面板里的
box-sizing值
全局重置时伪元素容易被忽略
很多人写了 * { box-sizing: border-box; } 就以为万事大吉，但 ::before 和 ::after 默认不继承该声明，它们生成的盒子仍走 content-box，一旦带 padding 或 border，就会悄悄撑开父容器。
例如：
.card::before {
content: "";
display: block;
width: 100%;
padding: 8px;
border: 2px solid #333;
/* 缺少 box-sizing: border-box → 实际宽度 = 100% + 16px + 4px */
}
修复方式只有一种：
*, *::before, *::after {
box-sizing: border-box;
}
- 这条规则必须放在所有 CSS 的最顶部，防止被其他 reset 覆盖
- 不能只写
*::before, *::after，通配符*必须一起出现，否则权重不足 - 老项目上线前务必测试
<table>、<code><textarea></textarea>等原生元素是否因全局设置出现高度塌陷最容易被跳过的点是：Flex 子项里混用
width和flex-basis。哪怕加了box-sizing: border-box，如果同时写了width: 100%和flex-basis: 200px，浏览器会优先用flex-basis，width可能被忽略 —— 这不是 bug，是规范行为，但常被当成“没生效”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
