flex-grow按比例分配剩余空间，前提是统一设flex-basis:0并显式重置min-width:0；否则默认flex-basis:auto会按内容宽度占位，图片等替换元素还受min-width:auto锁死，导致分配失衡。
flex-grow 分配前先按内容尺寸占位
flex-grow 不是直接控制最终宽度，它只负责把「容器主轴尺寸 − 所有子项 flex-basis 总和」算出来的剩余空间，按比例切分。而这个计算的起点，就是每个子项的 flex-basis。默认值是 auto，浏览器会取元素的内容宽度（max-content）作为 flex-basis —— 一个含“浙江省杭州市西湖区”的 div 和一个只写“京”的 div，前者 flex-basis 可能是 280px，后者只有 40px，差值直接吃掉大部分容器宽度，留给 flex-grow 分配的“剩余空间”所剩无几。
图片、、
这类元素即使写了 flex: 1 1 0，也会被浏览器隐式加 min-width: auto 锁死最小宽度，导致 flex-basis 实际不为 0。结果就是：一张 600px 宽的图强行占位，其他子项挤在边上，flex-grow 彻底失效。
- 必须显式写
min-width: 0（不是unset或0%） -
max-width: 100%防止溢出容器 - 对
<select></select>等表单控件同样适用，尤其在 iOS Safari 中更明显
flex-basis: 0 和 flex-basis: 0% 行为不一致
flex-basis: 0 是绝对零起点，强制所有子项从 0px 开始参与分配；而 flex-basis: 0% 在部分旧版 Safari 和 IE11 中会被解析为“内容宽度”，等于没设。这也是为什么 flex: 1（等价于 flex: 1 1 0%）在含图片的布局中经常失灵。
- 统一用
flex: 1 1 0替代flex: 1，尤其当子项含<img>、<input>、<iframe></iframe> - 避免混用
width和flex-grow：width会覆盖flex-basis，破坏分配逻辑 - 检查父容器是否设了
box-sizing: border-box，否则padding和border会额外吃掉空间，让剩余空间变负
长文本、无空格字符串让 flex-shrink 失效，间接卡死 flex-grow
当某个子项里有未折行的长 URL、base64 字符串或中文连续无标点文本时，即使 flex-shrink: 1 开着，浏览器也无法压缩它——因为内容不可断行，min-width 被锁死在超宽值。这一项占满整行，其他项拿不到任何剩余空间，flex-grow 就成了摆设。
- 对文本容器加
min-width: 0（和图片同理） - 加
word-break: break-all或overflow: hidden+text-overflow: ellipsis+white-space: nowrap - 优先用
word-break: break-word（兼容性更好）而非break-all，减少中文断词突兀感
flex-basis 起点、min-width 锁定、flex-shrink 是否生效、父容器是否可计算这四个环节共同作用的结果。漏掉其中任意一环，flex-grow 就可能静默失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
