Flex子元素高度塌陷的根本原因是父容器无显式高度且未启用交叉轴拉伸；解决方法包括：1.为父容器设置min-height或height；2.确保display:flex和align-items:stretch；3.清除子元素height/align-self干扰；4.必要时用align-self:stretch；5.注意box-sizing和overflow。
Flex 布局中子元素高度“塌陷”，通常是指子元素没有按预期撑满父容器高度，看起来被压缩、内容溢出或高度为 0。根本原因往往是：子元素本身没有设置明确高度，且父容器未启用垂直方向的拉伸对齐，导致 flex 项默认不占满交叉轴（即 column 方向的 height）。
确保父容器是 flex 容器且设定了高度
如果父容器没有显式高度（比如 height: 300px 或 min-height: 100vh），即使设置了 align-items: stretch，子元素也无“可 stretch 的空间”——因为父容器自身高度由内容决定，形成循环依赖。
- 给父容器设置一个确定的高度或最小高度（如 min-height: 100vh）
- 确认父容器已声明 display: flex 且主轴方向合理（flex-direction: row 是默认值，交叉轴即垂直方向）
用 align-items: stretch（推荐优先尝试）
这是最常用、最简洁的解法。align-items: stretch 是 flex 容器的默认值，它会让所有子元素在交叉轴上自动拉伸以填满父容器高度——但前提是子元素自身没有设置 height、max-height 或 align-self 覆盖该行为。
- 检查子元素是否意外写了 height: auto、height: 0 或 align-self: flex-start 等，这些会覆盖 stretch
- 移除子元素上干扰拉伸的样式，让 align-items: stretch 生效
对单个子元素用 align-self: stretch
当只需某个特定子元素撑高（其余保持默认对齐），可在该子元素上单独设置 align-self: stretch。它会覆盖父容器的 align-items 设置，仅对该元素生效。
立即学习“前端免费学习笔记（深入）”；
- 适用于侧边栏 + 主内容区布局：让主内容区自适应高度，侧边栏跟随
- 注意：若该子元素内部有 display: flex 且未设高度，仍需保证其子级也有对应拉伸逻辑
补充：内容溢出时别忘了 overflow 和 box-sizing
有时子元素看似“塌陷”，其实是内容超出后隐藏或滚动异常。确保：
- box-sizing: border-box 已应用（避免 padding/border 导致实际高度超限）
- 必要时加 overflow: auto 或 overflow: hidden 控制内容显示
- 避免子元素内使用 position: absolute 脱离文档流而丢失高度贡献
