flex-grow: 1 未生效主因是父容器未提供剩余空间，需确保父容器设 display: flex、明确高度（如100vh）且高度继承链完整；推荐用 flex: 1 替代仅设 flex-grow: 1，以避免 flex-basis: auto 导致内容撑开。
flex-grow: 1 为什么有时没反应
直接写 flex-grow: 1 却不撑高，大概率不是属性写错了，而是父容器没“给空间”。它只在父容器是 display: flex 且设了明确高度（比如 height: 100vh 或 min-height: 100%）时才生效。如果父容器高度由内容撑开，那根本没“剩余”可填。
常见错误现象：
- 父容器漏写
display: flex或flex-direction: column - 父容器用了
height: 100%但祖先链里某个父级没设高度，导致继承链断裂 - 目标元素本身有
min-height: auto（默认值），被内联内容或图片顶住，拒绝收缩 → 加min-height: 0解锁
flex: 1 和 flex-grow: 1 的实际区别
flex: 1 是简写，等价于 flex: 1 1 0%；而只写 flex-grow: 1 会保留默认的 flex-shrink: 1 和 flex-basis: auto。后者问题在于：flex-basis: auto 会让元素先按内容尺寸渲染，再分配剩余空间——结果就是内容一多，它就撑开，填不满。
所以推荐统一用 flex: 1，或显式写全：flex: 1 1 0%。尤其当目标区域要放滚动内容（如聊天记录列表）时，flex-basis: 0% 能确保它从零开始均分剩余空间。
立即学习“前端免费学习笔记（深入）”；
使用场景示例（垂直布局中中间区域自适应）：
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.header { height: 60px; }
.main { flex: 1; min-height: 0; overflow-y: auto; }
.footer { height: 48px; }
多个 flex: 1 兄弟共存时高度怎么分
所有设了 flex: 1 的子项默认等分剩余空间，和它们的内容多少无关。但如果想让某一块占更大比例，改第一个参数就行：比如 flex: 2 和 flex: 1 并存，前者拿 2/3，后者拿 1/3。
注意点：
-
flex-grow只在有剩余空间时起作用；一旦内容溢出或容器太小，flex-shrink才介入压缩 - 嵌套 Flex 容器时，内层的“剩余空间”只来自它的直接父容器，和外层高度无关 —— 容易误以为外层设了
100vh，内层就能自动填满，其实得逐层确认 - iOS Safari 下输入框聚焦时页面缩放，可能导致
flex: 1区域高度塌陷 → 必须加min-height: 0
为什么加了 flex: 1 还是溢出或滚动异常
最常被忽略的是 box-sizing 和 overflow 的组合影响。默认 box-sizing: content-box 下，padding 和 border 会额外撑出容器，视觉上“填不满”或“压不住”。同时，若子内容本身没设 overflow: hidden 或 max-height，滚动条可能失效或错位。
实操建议：
- 全局重置：所有 Flex 子项加
box-sizing: border-box - 对需要滚动的目标区域，必须同时设
flex: 1、min-height: 0、overflow-y: auto - 避免混用
height: 100%和flex: 1—— 后者会被前者覆盖，且百分比高度在 Flex 子项中行为不可靠
