flex-grow: 1 实现子项自动扩张需满足三条件：父容器设 display: flex；兄弟项 flex-grow 为 0 或未设置；配合 flex-basis 和 flex-shrink 避免意外收缩。
在 Flex 容器中，让某个子项自动扩张，核心就是用 flex-grow: 1 —— 但它不是孤立生效的，需配合容器和兄弟项的设置才能达到预期效果。
确保父容器是 flex 布局
子项的 flex-grow 只在 display: flex 或 display: inline-flex 的容器中起作用。如果父元素没设 flex，这个属性会被忽略。
- 检查父元素是否写了
display: flex; - 推荐同时设置主轴方向（如
flex-direction: row;默认即可）
注意兄弟项是否“抢空间”
flex-grow 是按比例分配剩余空间的。如果其他子项也设置了 flex-grow: 1，它们会均分；想让“某一项独占剩余空间”，就得让其他项 flex-grow: 0（或不设，因为默认就是 0）。
- 给目标项设
flex-grow: 1; - 其余子项避免设
flex-grow，或显式写flex-grow: 0; - 若兄弟项有固定宽高（如
width: 200px），它不会影响扩张逻辑，但会压缩剩余空间
别忘了 flex-shrink 和 flex-basis 的影响
flex-grow 控制“能撑多大”，但实际表现还受 flex-basis（基准尺寸）和 flex-shrink（是否允许收缩）影响。
立即学习“前端免费学习笔记（深入）”；
- 默认
flex-basis: auto，即按内容或 width/height 计算起点 - 若希望从 0 开始扩张，可写
flex-basis: 0;，再配flex-grow: 1;（常用组合：flex: 1 1 0;） - 避免意外收缩：必要时加
flex-shrink: 0;，尤其当内容超长又不想被压缩时
基本上就这些。flex-grow:1 不复杂，但容易忽略上下文依赖——父容器、兄弟项、基础尺寸，三者协同才稳。