flex-grow: 1 失效的根本原因是父容器无剩余空间或未形成flex上下文；需确保父容器设display: flex、有明确主轴尺寸、子元素为直接子项，且清除min-width/min-height等隐式限制。
flex-grow: 1 不生效，不是属性写错了，而是它根本没被计算——父容器没“剩空间”可分。
父容器没开 Flex 上下文，flex-grow 直接被忽略
flex-grow 只对 display: flex 或 display: inline-flex 的直接子元素起作用。如果父容器漏了 display: flex，或者中间夹了一层普通 div（比如用了 class="wrapper" 却没设 flex），那子元素就不是 flex item，flex-grow: 1 完全不解析。
- 检查 computed 样式里有没有
display: flex在父级上 - 用浏览器开发者工具选中目标元素，看“Flex”标签页是否亮起；不亮 = 父级没启用 Flex
- 嵌套结构中，每一层要伸缩的容器都得自己设
display: flex，不能靠继承
垂直方向撑不满，大概率缺高度约束
水平方向有 viewport 宽度兜底，但垂直方向没有默认“可用高度”。flex-grow: 1 想拉高，前提是父容器主轴（flex-direction: column 时是纵轴）有明确高度。
- 根容器加
min-height: 100vh最稳妥；用height: 100%要确保所有祖先都有高度（包括html、body） - 中间层容器若设了
flex-direction: column，它自己也必须是display: flex，否则它的子元素不参与列向分配 - 子元素内部有
overflow: auto或嵌套了 flex 容器时，浏览器会默认加min-height: auto，必须显式覆盖为min-height: 0
子元素被自身尺寸锁死，flex-grow 失去作用空间
flex-grow 不是“强制变大”，而是“分剩余空间”。一旦子元素已有固定尺寸或隐式最小限制，剩余空间就变成 0。
-
width、min-width、max-width（尤其min-width: auto在某些浏览器下会阻止拉伸）都会抢占空间 - 默认
flex-basis: auto→ 元素先按内容宽度/高度占位，再分剩余；内容一多，它就撑开，没空间留给 grow - 想让多个同级元素严格按系数分空间？统一用
flex: 1（等价于flex: 1 1 0%），或显式写flex-basis: 0 -
input、textarea等替换元素默认是 inline，必须包在display: flex容器里才能响应flex-grow
flex-grow: 1 和 flex: 1 行为差异常被误判
只写 flex-grow: 1 保留默认 flex-shrink: 1 和 flex-basis: auto；而 flex: 1 是简写，等价于 flex: 1 1 0%，起点归零更可控。
- 内容区域要放滚动列表？优先用
flex: 1，避免flex-basis: auto导致内容顶住无法收缩 - 侧边栏 + 主内容区布局中，
.main { flex-grow: 1 }配合.header { flex-shrink: 0 }才能真正填满中间空隙 - IE11 对
flex-basis: 0支持异常：即使写了，也可能全部等宽，需单独 hack
最容易被跳过的点是 min-height: 0 —— 它不是锦上添花，而是解锁 flex-grow 的必要条件，尤其当子元素内含图片、文本块或 overflow: auto 时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
