在 Flexbox 布局中，仅设置父容器 height 并不能自动使单个 flex 项（flex item）拉伸填满可用空间；需显式启用弹性增长机制，即通过 flex-grow: 1 实现高度自适应。
在 flexbox 布局中，仅设置父容器 `height` 并不能自动使单个 flex 项（flex item）拉伸填满可用空间；需显式启用弹性增长机制，即通过 `flex-grow: 1` 实现高度自适应。
默认情况下，flex 项的 flex-grow 值为 0，意味着它不会主动扩张以填充父容器的剩余空间——即使父容器已明确设定了固定高度（如 height: 300px），子元素仍仅按内容高度渲染。这是 Flexbox 的核心行为，而非 bug。
要让 .item 占满 .container 的全部可用高度（扣除 padding 后的净高），只需添加 flex-grow: 1：
.container {
display: flex;
flex-direction: column;
height: 300px;
background-color: #f0f0f0;
padding: 20px;
}
.item {
background-color: #fff;
padding: 20px;
border: 1px solid #ddd;
flex-grow: 1; /* ✅ 关键声明：允许该元素占据剩余空间 */
}⚠️ 注意事项：
-
flex-grow: 1仅在父容器为display: flex且存在未被其他 flex 项占用的剩余空间时生效； - 若容器内有多个 flex 项，
flex-grow值将按比例分配剩余空间（例如flex-grow: 2与flex-grow: 1将按 2:1 分配）； - 不推荐使用
height: 100%替代——因为百分比高度在 flex 上下文中需依赖父级显式高度+块级格式化上下文，易受padding、border及box-sizing影响，且不具弹性； - 确保父容器高度可计算：若
.container高度依赖于其自身父级（如height: 100%），请逐级检查祖先元素是否设置了明确高度或min-height。
✅ 总结：Flex 布局中“填满高度”的本质是弹性分配剩余空间，而非继承高度。flex-grow: 1 是语义清晰、兼容性好（支持所有现代浏览器及 IE11+）、符合 Flexbox 设计哲学的标准解法。
立即学习“前端免费学习笔记（深入）”；
