flex子项宽度被百分比干扰的典型表现是渲染偏差、缩放错位和跨浏览器不一致，根本原因在于width与flex-basis隐式冲突导致两次计算叠加。
flex 子项宽度被百分比干扰的典型表现
当你给 flex 容器里的子项同时设置 width: 50% 和 flex: 1（或 flex: 0 1 auto），浏览器实际渲染的宽度往往既不是严格 50%，也不是按 flex 分配，而是出现“看起来偏窄/偏宽”“缩放后错位”“不同浏览器结果不一致”等问题。根本原因是：CSS 规范中 width 是 flex-basis 的初始值来源之一，而 flex-basis 和 width 同时存在时会触发隐式覆盖逻辑。
flex-basis 和 width 的优先级冲突
在 flex 布局中，flex-basis 决定主轴上的初始尺寸；当未显式设置 flex-basis 时，浏览器会回退到 width（对 row 方向）或 height（对 column 方向）作为替代值。但一旦你手动写了 width: 50%，又没写 flex-basis，就等于把一个相对计算值（%）塞进了 flex 的基础尺寸字段——而 % 在 flex context 中是相对于父容器 content box 计算的，但 flex 分配阶段又会基于剩余空间再缩放，导致两次计算叠加出偏差。
-
flex: 1等价于flex: 1 1 0%，此时flex-basis是0%，width被忽略 -
flex: 0 1 50%显式设定了flex-basis: 50%，此时width完全无效 -
width: 50%; flex: 0 1 auto→ 浏览器用width当flex-basis，但 auto 表示“按内容宽”，与 50% 冲突，行为不可控
正确做法：只选一种控制方式
要让子项宽度可预测，必须切断 width 和 flex-basis 的隐式绑定。核心原则：要么完全交给 flex 分配，要么完全用传统盒模型控制，不要混用。
- 想等分？直接用
flex: 1，删掉所有width - 想固定比例（如 2:1）？用
flex: 2和flex: 1，而不是width: 66.66%+width: 33.33% - 必须用百分比（比如响应式栅格）？那就关闭 flex 分配：
flex: none或flex: 0 0 auto，再配width: 50% - 需要最小宽度兜底？用
min-width，它不参与flex-basis计算
.container {
display: flex;
}
.item-1 { flex: 2; } /* 占 2/3 */
.item-2 { flex: 1; } /* 占 1/3 */
/* 不要这样：
.item-1 { width: 66.66%; flex: 1; }
.item-2 { width: 33.33%; flex: 1; }
*/调试时怎么快速定位问题
打开 DevTools，在 Elements 面板选中 flex 子项，看 Computed 标签页里的 flex-basis 值。如果显示的是 50% 或 auto，但你没写过 flex-basis，那大概率是 width 在“冒名顶替”。这时候点开 Styles 面板，检查是否有多余的 width 声明——哪怕它来自 reset.css 或某个 UI 框架的默认样式，也会生效。
立即学习“前端免费学习笔记（深入）”；
- Chrome/Firefox 的 Computed 面板里，
flex-basis一行右侧有小箭头，点击可追溯来源 - 临时禁用
width看布局是否恢复正常，是最快验证手段 - 用
flex-basis: 0强制清空隐式继承，比删width更彻底
flex 布局的宽度计算本身不复杂，但混合使用时的隐式 fallback 很容易被忽略。真正麻烦的不是写错，而是改了 width 发现没反应，或者改了 flex 却发现宽度还卡在某个百分比上——那八成是 width 在暗处悄悄接管了 flex-basis。
