子元素未自动撑满父容器高度是因flex默认拉伸行为被限制，需确保父容器设置display: flex和明确高度，保持align-items: stretch，并避免子元素设置固定高度或min-height: auto；嵌套时逐层传递弹性布局样式即可解决。
在使用 CSS Flex 布局时，经常会遇到子元素没有自动撑满父容器高度的问题，即使设置了 height: 100% 或期望内容自动撑开，依然无法达到预期效果。这通常是因为父容器未正确设置弹性布局的对齐方式。
问题原因：flex 子元素未自动拉伸
默认情况下，当父元素设置为 display: flex 时，其子元素并不会自动填满父元素的高度。即便子元素内部有内容，也可能因为 flex 的默认对齐行为导致高度未被完全撑开。
关键点： flex 容器的子元素默认 align-items: stretch 是开启的，但若子元素显式设置了高度、或父元素未正确启用纵向拉伸，该行为可能失效。
解决方案：确保 align-items: stretch 生效
要让子元素在交叉轴（cross axis）上自动拉伸以填满父容器高度，需确保以下几点：
立即学习“前端免费学习笔记（深入）”；
- 父元素设置 display: flex
- 父元素具有明确的高度，或能被内容撑高
- 未对子元素设置固定高度或 align-self: flex-start 等覆盖行为
- 保持默认或显式设置 align-items: stretch
示例代码：
.container {
display: flex;
align-items: stretch; /* 默认值，可省略 */
height: 200px; /* 父容器需有高度 */
}
.item {
flex: 1;
/ 不设置 height，让其自动拉伸 /
}
常见修复场景
如果子元素仍无法撑开，检查是否存在以下情况：
- 子元素设置了 min-height: 0：某些情况下浏览器默认 min-height 为 auto，阻止了 stretch 行为，可尝试设置 min-height: 0 或 min-width: 0（针对 flex 方向）
- 嵌套 flex 容器未传递高度：确保每一层父级都有合理高度或弹性行为
- 使用了绝对定位或浮动：这些会脱离正常文档流，影响 flex 拉伸
总结
flex 子元素高度不能自动撑开，多数是由于容器未正确应用 align-items: stretch 或存在样式冲突。只需确保父容器为 flex 布局、有高度、且子元素未限制拉伸行为，即可解决。基本上就这些。
