子元素未撑满父容器高度的核心原因是父容器缺乏可计算高度且子元素存在高度限制。需确保父容器设height（如100vh）并启用display:flex，同时移除子元素的height/min-height等阻止拉伸的样式。
子元素没撑满父容器高度，通常不是子元素“不想拉伸”，而是它默认没有高度依据，或者父容器的 flex 布局没生效或配置不完整。
确认父容器已正确启用 Flex 布局
仅写 display: flex 不够，还需确保父容器自身有明确高度（比如 height: 100vh 或继承自某个有高度的祖先），否则子元素无“可拉伸的空间”。
- 父容器需有**可计算的高度**：浏览器不会凭空知道“整高”是多少，必须有依据（如
height: 100%配合父级设高，或直接用100vh） - 检查是否被其他样式覆盖：用开发者工具看 computed 样式中
display是否确实是flex，且align-items是stretch（这是默认值，一般不用显式写）
子元素本身不能有 height / min-height 冲突
如果子元素设置了 height: auto、height: fit-content、min-height: 0 或 overflow: hidden 等，可能触发 flex 的“最小尺寸限制”，导致无法拉伸。
- 移除子元素上显式的
height、max-height或min-height（除非必要） - 特别注意：
min-height: 0会关闭 stretch 行为，Flex 子项默认min-height: auto才能拉伸
避免嵌套块级元素干扰流式高度
如果子元素内部是普通块（如
），而该块没有设高，它不会自动占满父 flex 项的高度——这容易让人误以为“子元素没拉伸”，其实是内容没撑开。
立即学习“前端免费学习笔记（深入）”；
- 可在子元素上加
display: flex; flex-direction: column;，再让其子内容自然填满 - 或对内部块设
height: 100%（前提是父 flex 项已真正撑高）
需要等高多列？用 flex-direction: column + align-items
如果目标是多个子项在垂直方向“各自拉伸到容器全高”（比如侧边栏和主内容同高），那就要让父容器为 flex-direction: column，并确保每个子项设 flex: 1 或明确高度分配。
-
flex: 1比单纯依赖align-items: stretch更可控 - 例如：
.sidebar { flex: 0 0 240px; }+.main { flex: 1; }，两者都会拉伸到父容器高度
基本上就这些。核心就两点：父容器得有高度依据，子元素别自己锁死高度。