在 Flex 容器中，仅设置 height: 100% 无法使 flex item 自动撑满剩余空间；需使用 flex-grow: 1（配合 flex-direction: column）让子项弹性扩展并填充可用高度。
在 flex 容器中，仅设置 `height: 100%` 无法使 flex item 自动撑满剩余空间；需使用 `flex-grow: 1`（配合 `flex-direction: column`）让子项弹性扩展并填充可用高度。
Flexbox 的核心在于“弹性分配”而非传统盒模型的静态尺寸继承。当 .container 设置为 display: flex 且 flex-direction: column 时，其子元素默认表现为主轴（垂直方向）上不自动拉伸——即使容器有明确高度（如 height: 300px），单个 flex item 仍仅包裹内容高度，这是 Flexbox 的默认行为（flex-grow: 0、flex-shrink: 1、flex-basis: auto）。
要让 .item 占满容器全部可用高度，关键在于启用主轴上的弹性增长：
✅ 正确做法是添加 flex-grow: 1 到 .item：
.container {
display: flex;
flex-direction: column;
height: 300px; /* 必须有明确高度（或 min-height） */
background-color: #f0f0f0;
padding: 20px;
}
.item {
background-color: #fff;
padding: 20px;
border: 1px solid #ddd;
flex-grow: 1; /* ✅ 关键：允许在主轴（列方向）上拉伸填充剩余空间 */
}⚠️ 注意事项：
-
flex-grow: 1仅在父容器存在未被占用的主轴剩余空间时生效。若容器高度未显式定义（如仅靠内容撑开），则无“剩余空间”可分配，此时需确保.container具有确定的高度（height或min-height）。 - 避免同时设置
height: 100%—— 它在 flex 上下文中通常无效，因 flex item 的尺寸由 flex 属性主导，而非百分比继承。 - 若容器内有多个子项，
flex-grow: 1会按比例分配剩余空间；如仅一个子项，则它将独占全部剩余高度。
总结：Flex item 的高度控制权在 flex-grow / flex-shrink / flex-basis 三者组合，而非传统 height 或 width。理解主轴方向与弹性行为的关系，是掌握 Flexbox 布局的关键。
