CSSFlex子元素撑满剩余高度方法

在CSS Flex布局中，让子元素撑满剩余高度时，`flex: 1` 是比 `height: 100%` 更可靠、更健壮的选择——它不依赖整条祖先链的显式高度声明，而是基于Flex容器的剩余空间动态分配，尤其适合现代前端框架中嵌套深、结构动态的场景；但其生效需满足关键前提：父容器必须是Flex上下文、自身具备可分配的高度（如`height: 100vh`或`min-height`），且子元素需设置`min-height: 0`以解除内容高度对拉伸的限制；而`height: 100%`仅在高度链完全可控的静态环境中勉强可用，一旦遇到React/Vue的隐式包裹节点、`overflow: hidden`创建的新包含块或Grid容器，便极易失效且难以排查。

flex: 1 为什么比 height: 100% 更可靠

因为 height: 100% 依赖父容器有明确高度（比如 height: 400px 或 height: 100vh），而 Flex 容器本身可能没设高度，此时子元素的 height: 100% 会失效——浏览器无法解析“100% of undefined”。flex: 1 则是 Flex 布局原生能力，它不查父高，只按剩余空间动态分配。

常见错误现象：height: 100% 在嵌套 Flex 容器里突然不生效，尤其在 React/Vue 组件中层层包裹后；或者页面滚动时子区域高度“塌缩”成一行内容高。

• flex: 1 等价于 flex: 1 1 0，其中 flex-basis: 0 是关键：它让元素从“零基准”开始拉伸，避免内容高度干扰分配逻辑
• 如果父容器是 display: flex; flex-direction: column，且已有头部/底部固定高度，中间区域用 flex: 1 就能自动填满剩余空间
• height: 100% 在 position: absolute 场景下有时可用，但和 Flex 混用极易冲突，不建议交叉使用

flex: 1 不生效的三个典型原因

不是写上就一定撑开，得看上下文是否满足 Flex 分配条件。

• 父容器没设 display: flex 或 display: inline-flex —— flex: 1 在非 Flex 容器里完全被忽略
• 父容器高度为 auto 且无其他约束（比如没设 min-height 或 height），导致“剩余空间”为 0
• 子元素自身设置了 min-height: auto（浏览器默认值），而内容极少时，Flex 不会压缩它低于内容高度；可加 min-height: 0 解锁收缩能力

示例场景：一个全屏布局，顶部 header 高 60px，底部 footer 高 40px，中间 main 要填满：

.container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 关键：父容器必须有高度 */
}
header { height: 60px; }
main { flex: 1; min-height: 0; } /* min-height: 0 防止内容少时卡住 */
footer { height: 40px; }

height: 100% 在什么情况下还能用

仅当你能**精确控制每一层父容器的高度链**，且不涉及动态内容或响应式折叠时，height: 100% 才稳定。比如纯静态弹窗、Canvas 容器、或 SSR 渲染后高度固定的卡片。

• 必须逐级设置：父 → 父的父 → …… 直到某个祖先有 height 或 max-height
• 遇到 overflow: hidden 或 transform 的祖先，会创建新的 containing block，height: 100% 可能意外参照错对象
• 在 CSS Grid 容器里给子项设 height: 100% 通常无效，Grid 子项默认不继承块高，得靠 align-self: stretch

React/Vue 中容易被忽略的包裹节点问题

框架组件常自带一层匿名或语义化包裹节点（比如