flex-grow: 1 是让内容区自动填充剩余空间最直接的解法，需父容器设 display: flex、flex-direction: column 和 height: 100vh；内容区设 flex-grow: 1 并可选 overflow-y: auto；失效主因是父容器无高度参照或未启用 Flex 布局。
内容区随窗口变化，核心是让内容区域自动填充剩余空间，flex-grow 是最直接、干净的解法——前提是父容器已启用 Flex 布局。
确保父容器是 flex 容器
内容区要“生长”，必须有可伸缩的上下文。通常布局结构是：顶部导航 + 内容区 + 底部（可选）。需要给外层容器设 display: flex 和方向（如列向）：
.layout {
display: flex;
flex-direction: column;
height: 100vh; /* 关键：高度需有参照，否则 flex-grow 无空间可占 */
}给内容区设置 flex-grow: 1
这是关键一步。只要父容器高度确定且为 flex 列布局，内容区加这一行就能自动撑满剩余空间：
.content {
flex-grow: 1;
overflow-y: auto; /* 可选：内容超长时出现滚动条，不撑破布局 */
}- 值为
1表示它有权按比例占据所有剩余自由空间 - 若还有其他同级元素也设了
flex-grow，会按数值比例分配空间 - 不需要写
flex-shrink或flex-basis，默认行为已足够
避免常见失效原因
flex-grow 不生效，90% 是因为下面几点：
立即学习“前端免费学习笔记（深入）”；
- 父容器没设
height或min-height（比如只用height: auto），导致没有“剩余空间”可计算 - 父容器未设
display: flex，或设成了flex-direction: row却期望垂直撑开 - 内容区自身或祖先元素有
overflow: hidden或固定高度限制 - 用了
position: absolute等脱离文档流的定位，flex 属性对其无效
配合响应式更稳妥
单纯 flex-grow 已能应对窗口缩放，但可叠加简单媒体查询增强体验：
@media (max-width: 768px) {
.layout {
padding: 0 12px;
}
.content {
padding: 16px;
}
}- 小屏时收窄左右边距，避免文字过宽难读
- 内容区内边距微调，提升触控友好性
- 不破坏 flex-grow 的自适应逻辑，只是优化视觉细节
