答案：通过设置父容器display: flex和flex-direction: column，并给子元素定义flex属性，可实现高度自适应。1. 父容器需有明确高度且设为flex布局；2. 子元素用flex: 1等值分配剩余空间；3. 结合min-height和overflow控制溢出，确保内容可滚动且不压缩。
在使用 Flexbox 布局时，让子元素高度自适应父容器是一个常见需求。通过合理设置 flex-grow、flex-shrink 和父容器的属性，可以轻松实现高度的动态分配与自适应。
理解 flex 属性的基本作用
flex 是 flex-grow、flex-shrink 和 flex-basis 的简写，控制子元素如何在容器中伸缩。
- flex-grow：定义子元素的放大比例。值为 0 时不放大，为 1 或更大时按比例占据剩余空间。
- flex-shrink：定义子元素的缩小比例。当空间不足时，值越大收缩越多。
- flex-basis：设置子元素的初始主轴尺寸，可为固定值（如 200px）或 auto（内容决定大小）。
例如：flex: 1 等同于 flex: 1 1 0%，常用于填满可用空间。
父容器设置为 flex 并启用垂直布局
要实现高度自适应，父容器必须是 flex 容器，并将主轴设为垂直方向（column）。
.container {
display: flex;
flex-direction: column;
height: 100vh; /* 必须有明确高度 */
}
如果父容器没有设定高度，子元素无法“参考”可伸缩的空间，flex 效果将不生效。
子元素通过 flex 控制高度分配
在 column 方向下，flex 影响的是子元素的高度。
- 某个子元素设置 flex: 1，它会撑满父容器的剩余高度。
- 多个子元素都设置 flex: 1，它们将平分剩余空间。
- 设置 flex: 2 的元素会占两份，flex: 1 占一份。
示例：
.header { height: 60px; }
.main { flex: 1; } /* 自动填充剩余高度 */
.footer { height: 40px; }
这样页面结构中，main 区域会随窗口变化自动调整高度。
避免内容溢出与最小高度控制
有时内容过多会导致溢出，可通过以下方式优化：
- 给可滚动区域添加 overflow-y: auto。
- 使用 min-height 防止元素被压缩到不可读。
- 确保非弹性元素（如 header）使用固定高度或 min-height。
例如：
.main {
flex: 1;
min-height: 0; /* 允许在 flex 中正确收缩 */
overflow: auto;
}
基本上就这些。只要父容器有明确高度并设为 flex，子元素用 flex-grow 就能自然拉伸，实现高度自适应。关键是理解 flex 如何在 column 布局中分配纵向空间。不复杂但容易忽略细节。
