flex-grow 本身不控制占比，只分配剩余空间；要实现严格2:1等比例，必须设flex-basis: 0并用flex简写（如flex: 2 1 0），确保起点一致、父容器有明确宽度、内容不干扰尺寸。
直接说结论：flex-grow 本身不控制“占比”，只分配「剩余空间」；想实现严格 2:1、3:1 这类动态宽度比，必须配合 flex-basis: 0，否则内容宽度会干扰结果。
为什么 flex-grow: 2 和 flex-grow: 1 不等于 2:1 宽度？
因为 flex-grow 只管“多出来的那部分”，不管“原本占多少”。浏览器先按 flex-basis（默认是 auto，即内容自然宽）排一遍，再把剩余空间按权重分。如果一个子项含长文本（原始宽 300px），另一个是空 div（原始宽 0），即使都设 flex-grow: 1，最终宽度也会严重不均。
- 设
flex-basis: auto→ 起点是内容宽，flex-grow只是锦上添花 - 设
flex-basis: 0→ 起点归零，flex-grow才真正决定全部宽度比例 - 验证方法：用开发者工具看 computed 的
flex-basis值，不是看声明里写了啥
怎么写才能让两个子项严格按 2:1 占满父容器？
必须统一 flex-basis 为 0，并显式声明 flex-shrink 行为，避免被意外压缩。推荐用 flex 简写，而不是单独写 flex-grow。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 左侧项：
flex: 2 1 0→ grow=2, shrink=1, basis=0 - 右侧项：
flex: 1 1 0→ grow=1, shrink=1, basis=0 - 别写
flex-grow: 2; flex-basis: 0分两行——万一漏了flex-shrink，IE11 或某些移动端会表现异常 - 父容器必须有明确宽度（比如
width: 100%或固定值），否则“剩余空间”为 0，flex-grow直接失效
动态改比例时最容易踩的坑
JS 改 style.flexGrow 或内联 flex 值时，旧的 flex-basis 可能残留。比如之前设过 flex-basis: 200px，现在只改 flex-grow，它还是从 200px 开始加。
立即学习“前端免费学习笔记（深入）”；
- 安全做法：用 class 切换，比如定义
.ratio-2 { flex: 2 1 0; }和.ratio-1 { flex: 1 1 0; } - 临时调试可加
min-width: 0——很多“不收缩”问题其实是文字或图片触发了最小内容宽保护 - IE11 对
flex-grow: 0解析异常，会当成 1，此时必须写成flex: 0 0 auto降级 -
flex: 1是flex: 1 1 0%的简写，但规范要求0%应等价于0（无单位），实际中写0更稳妥
真正难的从来不是算比例，而是确保所有子项起点一致、父容器有空间、内容不锁死尺寸——这三者缺一，flex-grow 就只是个摆设。
