flex: 1是唯一可靠解，因其不依赖父容器像素高度，而是动态分配剩余空间；height: 100%需整条祖先链均有明确高度，任一层auto即失效，且flex: 1等价于flex: 1 1 0，关键在flex-basis: 0。
必须用 flex: 1，不能只靠 height: 100% —— 后者在 flex 容器里基本无效，尤其嵌套后大概率失效。
为什么 flex: 1 是唯一可靠解
它不依赖父容器的“计算高度值”，而是由 flex 布局引擎动态分配剩余空间。而 height: 100% 要求整条祖先链上每个父级都明确设了 height（比如 100vh 或具体像素），只要中间某一层是 height: auto，就会断链失效。
-
flex: 1等价于flex: 1 1 0，其中flex-basis: 0是关键：它让元素从零开始拉伸，避免内容本身撑高干扰分配 - 只写
flex-grow: 1不够 —— 默认flex-basis: auto，内容一多就撑开，填不满剩余空间 - 父容器必须有
display: flex+flex-direction: column（垂直场景）且有明确高度约束（如height: 100vh或min-height: 500px）
flex: 1 不生效的三个高频原因
不是属性写错了，而是上下文没配齐：
- 父容器漏了
display: flex或flex-direction: column——flex: 1在非 flex 容器中完全被忽略 - 父容器高度为
auto且无min-height/height，导致“剩余空间”为 0 - 子元素自身有
min-height: auto（浏览器默认），内容少时 Flex 拒绝压缩 → 必须加min-height: 0解锁收缩能力
滚动内容区域必须加 overflow-y: auto 和 min-height: 0
只填满还不够，内容超长时得能滚动，且不能因内联内容或图片卡住高度：
-
overflow-y: auto比scroll更合理：有内容溢出才显示滚动条，避免空滚动条干扰视觉 -
min-height: 0必须显式设置 —— 否则即使flex: 1生效，内部一个图片或段落也可能把整个区域顶高，破坏“填满剩余”的预期 - 如果父容器用了
border或padding，记得用box-sizing: border-box，否则视觉上会“撑出”边界
别碰 calc(100vh - xxxpx) 这种硬编码方案
它看似直观，但实际维护成本极高：
- 每次 header/footer 高度微调、padding 变更、甚至加个边框，都要重算并改 CSS
- 响应式场景下（比如移动端折叠菜单），静态减法完全失灵
- 嵌套结构中，不同层级的边框/内边距叠加会让计算彻底失控
- Flex 方案天然适配动态内容，
flex: 1+min-height: 0+overflow-y: auto三者组合才是稳定基线
最易被忽略的是 min-height: 0 —— 它不常写，但一旦缺了，哪怕其他条件全对，子元素也会因内容“最小尺寸锁定”而拒绝收缩，导致高度塌陷或滚动异常。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
