子元素高度撑不开的主因是Flex容器中子项默认flex-shrink:1被压缩。需检查父容器是否为flex布局、子项是否设置flex-shrink:0和min-height、flex-direction与align-items影响，以及box-sizing和object-fit等细节。
子元素高度撑不开，常见原因是父容器启用了 Flex 布局后，子项默认开启 flex-shrink: 1，在空间不足时会被压缩（包括高度方向），尤其当父容器设了固定高度或受外层限制时。
确认父容器是否为 flex 容器且子项未禁用收缩
Flex 子项默认会缩小以适应容器，即使你设置了 height: 200px，只要父容器高度不够或存在其他约束，它仍可能被压扁。关键检查点：
- 父元素是否设置了
display: flex或display: inline-flex - 子元素是否显式设置了
flex-shrink: 0（阻止压缩） - 子元素是否同时设置了
min-height（防塌陷的兜底手段）
垂直方向需额外关注 flex-direction 和 align-items
如果父容器是 flex-direction: column，那么子项的高度才真正参与主轴伸缩；若为默认的 row，高度属于交叉轴，此时 flex-shrink 不直接影响高度，但 align-items 可能导致子项被拉伸或截断：
-
align-items: stretch（默认）：会让子项在交叉轴上拉满父容器高度 → 若父高固定且子内容少，看起来“撑不开”其实是被拉高了 -
align-items: flex-start：子项按自身内容高度显示，更易观察真实高度 - 可配合
align-self: auto单独控制某个子项对齐方式
检查是否遗漏 min-height 或 box-sizing 影响
即使禁用了 shrink，若子元素内部有 padding/border，而 box-sizing 是默认的 content-box，设定的 height 就不包含内边距，视觉上会显得“没撑开”：
立即学习“前端免费学习笔记（深入）”；
- 统一加
box-sizing: border-box避免尺寸计算偏差 - 用
min-height替代height，允许内容自然撑开 - 对图片、视频等替换元素，记得设
height: 100%+object-fit，否则可能保持固有宽高比而留白
快速验证与修复示例
假设父容器是 column 布局，子项需要固定最小高度：
.parent {
display: flex;
flex-direction: column;
height: 300px; /* 固定高度，易触发收缩 */
}
.child {
flex-shrink: 0; /* 关键：禁止压缩 */
min-height: 120px; /* 确保至少显示这么多 */
box-sizing: border-box;
}
若仍无效，临时加 border: 1px solid red 查看实际渲染区域，确认是内容没撑开，还是样式被覆盖或继承干扰。
