Flex项目宽度不准主因是box-sizing未正确应用在所有子项上；需对每个flex子项设border-box，统一用flex-basis控制宽度，容器加min-width:0防溢出。
flex 项目宽度计算不准，box-sizing 没生效？
Flex 项目默认用 content-box，但很多人设了 box-sizing: border-box 后发现宽度还是“撑开”了——不是样式没加对，而是没加在正确元素上。Flex 容器本身不参与尺寸计算，真正要设 box-sizing 的是 **所有 flex 项目（即 display: flex 的直接子元素）**。
常见错误：只给容器设 box-sizing，或只在部分子项上设，漏掉 padding/border 非零的项。
- 必须对每个 flex 子项显式设置
box-sizing: border-box - 如果子项是自定义组件（如 Vue/React 组件），需确保该组件根元素也继承或设置了该值
- 全局重置时，
* { box-sizing: border-box }最保险，但注意它会影响伪元素和某些第三方 UI 库内部结构
flex-basis 和 width 冲突导致尺寸错乱
flex-basis 是 flex 项目的“基准尺寸”，它优先级高于 width（当 flex-direction 为 row 时）。如果你写了 width: 200px 又没改 flex-basis，浏览器会按 flex-basis: auto 解析，实际取内容宽度或 width 值——但一旦你显式设了 flex-basis: 200px，width 就完全被忽略。
更麻烦的是：flex-basis 默认值是 auto，而 auto 会先查 width 或 height，再查内容，逻辑嵌套容易误判。
立即学习“前端免费学习笔记（深入）”；
- 想严格控制初始宽度？统一用
flex-basis: 200px，别混用width - 需要响应式缩放？用
flex: 1 1 200px（即flex-grow/flex-shrink/flex-basis），避免只写flex: 1 - 设了
flex-basis: 0却发现项目消失？那是因为内容为空且没设min-width，补上min-width: 0才能正常收缩
padding/border 导致 flex 容器溢出或换行
即使所有子项都设了 box-sizing: border-box，如果父容器没设 overflow: hidden 或 min-width: 0，flex 项目在收缩时仍可能因 padding/border 被强制换行或撑破容器——这是 flex 算法对“最小尺寸”的保守处理。
典型场景：一行 4 个 flex: 1 的卡片，每个有 padding: 16px，结果在窄屏下突然变成两行。
- 给 flex 容器加
min-width: 0，告诉它“允许子项压缩到 0” - 若子项含文字，文字本身有最小宽度，需配合
min-width: 0+word-break: break-all或overflow: hidden控制 - border 在 flex 收缩时不会自动缩放，所以大边框建议改用
outline（不占布局空间）或背景模拟
浏览器兼容性让 box-sizing + flex 表现不一致
老版本 Safari（flex-basis 的解析有偏差：它们把 flex-basis: auto 当作“无视 width”，而现代浏览器会读取 width。这就导致同样代码，在 Chrome 里宽度正常，IE 里却塌陷。
这不是 box-sizing 的锅，但常被误认为是它没起作用。
- 兼容 IE11？放弃
flex-basis，改用width+flex: 1，并确保所有子项都有明确width - Safari 9–10？避免
flex-basis: 0，改用flex-basis: 1px（视觉无差别，但解析稳定） - 检查是否启用了
display: -webkit-flex，旧前缀可能干扰标准属性解析
/* 兼容写法示例 */
.item {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-flex-basis: 1px;
flex-basis: 1px;
flex-grow: 1;
flex-shrink: 1;
}最易被忽略的点：flex 布局中，box-sizing 只管单个元素盒模型，不管 flex 算法怎么分配空间。算法本身依赖 flex-basis、flex-grow、容器剩余空间三者博弈——哪怕每个盒子都“准”，合起来也可能不准。
