flex-grow: 1 失效的根本原因是父容器无主轴剩余空间或未形成flex上下文；必须设display: flex、明确主轴尺寸（如height/width）、清除min-width: auto等隐式限制，并常需配合min-width: 0和flex: 1才可靠生效。
flex-grow: 1 为什么经常不生效
它只在父容器有「主轴方向剩余空间」时才起作用，不是设了就自动撑满整个容器。常见失效场景包括：
• 父容器没设 display: flex 或 height/width（比如高度依赖内容）
• 子元素被 min-width: auto 锁死——这是最隐蔽的坑，浏览器默认不让 Flex 项收缩到比内容更小的宽度
• 内容含超长无空格字符串（如 aaaaaaaaaaaaaaaaaaaa），且没配 min-width: 0 和断行策略
• 父容器设了 flex-wrap: wrap，但你期望的是单行填满
必须同时设置 min-width: 0
min-width: 0 是让 flex-grow: 1 真正起效的关键补丁。Flex 项默认 min-width: auto，会强制维持内容最小宽度，导致无法压缩换行，也就没“剩余空间”可分。
实操建议：
• 所有需要填满剩余空间的 Flex 子项，只要内容可能超长，都应加 min-width: 0
• 若需单行显示并截断，配合 overflow: hidden + text-overflow: ellipsis + white-space: nowrap
• 若需多行换行，加 word-break: break-word 或 overflow-wrap: break-word
flex: 1 比 flex-grow: 1 更稳妥
flex: 1 是 flex-grow: 1、flex-shrink: 1、flex-basis: 0% 的简写，其中 flex-basis: 0% 显式清空初始占位，比单独写 flex-grow: 1 更可靠。
使用条件：
• 父容器必须有明确主轴尺寸（比如 width 或 height）
• 多个 flex: 1 兄弟项会等分剩余空间；若要不等分，改第一个参数，如 flex: 2 占比是 flex: 1 的两倍
• 不要和 width 混用，尤其别写 width: 100%，会与 Flex 计算冲突
嵌套 Flex 容器里 flex: 1 的“剩余空间”来自哪
它只认**直接父容器**的主轴剩余空间，和外层无关。典型翻车现场：
• Tab 页面中，顶部 header + 中间 content + 底部 tabbar，content 设 flex: 1 却不撑高 → 检查中间是否漏了 flex-direction: column 的容器
• iOS Safari 输入框聚焦后页面缩放，flex: 1 区域高度塌陷 → 加 min-height: 0 防止继承父容器最小高度
• 嵌套两层 Flex，内层 flex: 1 没反应 → 用开发者工具看 computed width/height，确认上一层容器是否真有可分配的剩余空间
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
