子元素未撑满父容器高度的核心原因是父容器缺乏可计算高度且子元素存在高度限制。需确保父容器设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 项已真正撑高）