弹性盒子中子元素高度塌陷可通过设置align-items:stretch或为子元素添加min-height解决，前者使子项在交叉轴拉伸填充容器，后者防止内容过少时高度丢失，同时需检查height、flex-shrink等属性避免压缩。
弹性盒子（Flexbox）中子元素高度塌陷通常出现在父容器未明确设置高度，或子元素内容不足以撑开容器时。这种现象会导致布局异常，比如背景、边框显示不全等。解决方法主要有两种：使用 align-items 控制交叉轴对齐，或通过 min-height 强制最小高度。
使用 align-items 统一子元素高度
在弹性容器中，如果子元素内容高度不一致，部分元素可能不会拉伸到容器高度，造成视觉上的“塌陷”。可通过设置 align-items 属性让所有子项在交叉轴上对齐并拉伸。
常用值包括：- stretch：默认值，子元素拉伸至容器高度（前提是子元素未设置固定高度）
- center：居中对齐，同时拉伸以填充容器
- flex-start 或 flex-end：对齐顶部或底部，但不会自动拉伸
推荐将父容器的 align-items: stretch; 显式声明，确保子元素能正常拉伸占满高度。
为子元素设置 min-height 防止塌陷
当子元素内部内容过少，且父容器使用了 flex-direction: column 时，容易出现高度无法撑开的问题。此时可为子元素设置 min-height 来避免完全塌陷。
立即学习“前端免费学习笔记（深入）”；
例如：- 设置 min-height: 100px; 确保最小展示空间
- 使用 min-height: 100%; 让子元素继承父容器高度
结合 display: flex 的父级结构，min-height 能有效防止内容缺失时的高度丢失问题。
检查 flex 子项是否被限制高度
有时子元素自身设置了 height: 0 或 overflow: hidden，也可能导致视觉上像“塌陷”。需确认：
- 子元素没有设定过小的 height
- 未使用 flex-shrink: 1 导致被压缩（可设为 0 禁止收缩）
- 父容器有明确的高度参考（如 height: 300px; 或由内容撑起）
基本上就这些。合理使用 align-items 和 min-height，再检查 flex 相关属性，就能解决大多数弹性盒子内的高度塌陷问题。不复杂但容易忽略细节。
