flex: 1 更可靠，因其不依赖父容器显式高度，而是按剩余空间动态分配；height: 100% 则需整条祖先链均有明确高度，否则失效。
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 中容易被忽略的包裹节点问题
框架组件常自带一层匿名或语义化包裹节点（比如 <div>、<code><section></section>），它可能没设 display: flex 或漏掉 height，导致你写的 flex: 1 根本没作用到目标层级。
- 用浏览器开发者工具检查真实 DOM 结构，确认
flex: 1元素的**直接父节点**是否为 Flex 容器 - Vue 的
<template></template>或 React 的 Fragment (>) 不生成真实节点，但组件返回的 JSX/模板若多包了一层<div>，就得手动透传样式<li>Next.js 的 <code><layout></layout>或 Ant Design 的<layout></layout>组件内部已设 Flex，但它的子元素仍需显式设flex: 1，不能只靠类名
复杂点永远在链路深度：父容器有没有高度、中间有没有非 Flex 包裹层、子元素有没有 min-height 锁死——这三处任一断裂，flex: 1 就静默失效，而你看到的只是“没撑开”，不会报错。
