flex-grow比calc()更可靠，因其是声明式逻辑、不依赖固定像素值、不受父容器高度限制、能响应动态内容变化，而calc()是硬编码、易因尺寸变动失效、在flex中仅适用于兜底微调。
Flex 布局本身不依赖 calc() 就能撑满剩余空间，强行混用反而容易出错。真要用 calc()，通常说明你没用对 Flex，或者场景特殊（比如父容器高度不可控、需要兼容老浏览器）。
为什么 flex-grow 比 calc() 更可靠
flex-grow: 1 是声明式逻辑：「我自动占满剩余空间」，不关心其他元素具体多高；而 calc(100% - 60px) 是硬编码逻辑：必须精确知道顶部区域是 60px，一旦改了就得同步改 CSS。
- Flex 不受父容器是否设
height限制（只要父容器有明确高度，比如height: 100vh或min-height: 100vh） -
calc()要求父容器有可计算的百分比高度，否则100%无效 - Flex 支持动态内容变化（比如 header 高度随文字换行变高），
calc()无法响应这种变化
calc() 在 flex 容器里唯一合理的用法
只在需要「固定部分 + 弹性部分 + 固定部分」且中间弹性项需同时满足最小/最大高度时，才考虑给 flex-basis 配合 calc()：
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.header { height: 72px; }
.main {
flex: 1;
min-height: calc(100vh - 72px - 48px); /* 确保即使内容为空也不塌陷 */
}
.footer { height: 48px; }
注意：min-height 是保险，不是主力；真正撑开靠的是 flex: 1，不是这个 calc()。
常见踩坑：把 calc() 当 flex 用
比如写成这样：
.main {
height: calc(100vh - 72px - 48px); /* 错！这不是 flex 行为 */
}
问题很直接：
- 如果
.header实际渲染高 84px（字体放大或 padding 变化），.main就会溢出或留白 - 在移动端缩放时，
vh值可能因地址栏显隐跳变，calc()不会重算 - Flex 容器里设
height会破坏flex-grow的布局逻辑，导致子项无法伸缩
真正需要动态适配剩余空间时，优先信 flex: 1 或 flex-grow: 1；calc() 只该出现在兜底、微调或兼容性补丁里，而不是主干逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
