flex: 1 是最直接有效的写法，但必须满足父容器设 display: flex、主轴方向明确、主轴有可分配剩余空间三个前提；它比 flex-grow: 1 更可靠，因 flex-basis: 0% 清空初始占位，避免内容宽度干扰分配，配合 min-width: 0 才能应对超长内容并确保真正撑满。
flex: 1 是最直接有效的写法，但必须满足三个前提：父容器设了 display: flex、主轴方向明确、父容器在该主轴上有可分配的剩余空间。
为什么 flex-grow: 1 经常不生效
它不是“设了就撑满”，而是“有剩余才分配”。常见失效原因包括：
- 父容器没设
display: flex，或被其他样式（如display: block）覆盖 - 父容器在主轴方向无明确尺寸约束（比如横向布局时没设宽度，纵向时没设
height或max-height） - 子元素被默认的
min-width: auto锁死——内容再长，它也不肯压缩换行，导致“没剩余空间”可分 - 父容器用了
flex-wrap: wrap，但你期望的是单行填满
flex: 1 比 flex-grow: 1 更可靠
flex: 1 是 flex-grow: 1、flex-shrink: 1、flex-basis: 0% 的简写，其中 flex-basis: 0% 是关键：它让子项初始占位为零，把全部空间留给 flex-grow 分配。
单独写 flex-grow: 1 时，flex-basis 默认是 auto，意味着先按内容宽度占位，再伸展——结果往往是“比内容宽一点”，而非“填满剩余”。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 所有需填满剩余空间的子项，统一用
flex: 1，不要省略第三项 - 若需多个子项不等分（如主区占 2 份、侧边栏占 1 份），改第一个参数：
flex: 2和flex: 1 - 固定宽元素用
flex: 0 0 240px，比width: 240px更安全，避免被拉伸或压缩
内容超长时仍溢出？加 min-width: 0
这是最容易被忽略的补丁。Flex 子项默认 min-width: auto，会阻止它收缩到比内容更小的宽度，导致无法换行、文字顶破容器。
只要子项内含文本、图片或可能超长的内容，都应显式加：
.content {
flex: 1;
min-width: 0;
}
配合断行策略使用效果更稳：
- 单行截断：
overflow: hidden+text-overflow: ellipsis+white-space: nowrap - 多行换行：
word-break: break-word或overflow-wrap: break-word
嵌套 Flex 容器里 flex: 1 失效怎么办
它的“剩余空间”只来自**直接父容器**，和外层无关。典型翻车场景：
- 顶部 header + 中间 content + 底部 tabbar，content 设了
flex: 1却不撑高 → 检查中间是否漏了flex-direction: column的容器 - iOS Safari 输入框聚焦后，
flex: 1区域高度塌陷 → 加min-height: 0防止继承父容器最小高度 - 开发者工具里看 computed
height，如果显示auto或远小于预期，说明上一层容器根本没提供可分配的高度
真正起作用的永远是那一层直接包裹它的 display: flex 容器，而不是整个 DOM 路径上的任意一个 Flex 父级。
