17370845950

Flex子项height:100%失效主因是父级高度未明确设置；需确保html、body及所有上级容器有height（如100vh）或flex:1，且避免align-self、min-height:0等干扰拉伸。

子项 height: 100% 不生效，因为父容器没设高度

Flex 容器本身不自动撑开高度，子项写 height: 100% 会失效——百分比高度依赖父级有明确高度（px、vh 或已由内容撑开），而 Flex 容器默认是 height: auto。

• 检查父级是否设置了 height 或 min-height，比如 html, body { height: 100%; } 是常见前提
• 若父容器是 Flex 容器（如 display: flex 的 .container），它需显式设高，或用 flex: 1 让它占满剩余空间
• 避免只给子项设 height: 100% 却忽略其所有上级（包括 html、body、容器）的高度链

align-items: stretch 被其他样式覆盖

Flex 子项默认会拉伸填满交叉轴（通常是高度），但这个行为会被 height、min-height、align-self 或 flex 相关属性干扰。

• 确认没意外设置 align-self: flex-start 或 height: auto 等值
• 子项若有 min-height: 0（常见于重置样式或某些 UI 框架），会阻止拉伸，删掉或改为 min-height: auto
• 如果用了 flex: 1，它等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0，此时子项基于内容最小高度为 0，可能“塌陷”；改用 flex: 1 1 auto 可保留内容基线

子项内部内容溢出或 overflow 阻断自适应

即使外部拉伸成功，子项内部元素若未正确处理高度约束，也会导致视觉上“没撑开”。

• 子项内嵌的块级元素（如 div、section）若设了 height: 100%，仍要满足其父级（即 Flex 子项）已有确定高度
• overflow: hidden 或 overflow: auto 本身不阻止高度自适应，但如果内部内容被截断，可能误判为“没撑开”
• 检查是否有 position: absolute 子元素脱离文档流，导致父项无法感知真实内容高度

Flex 容器设了 flex-direction: column 但忘了主轴方向影响

在列方向布局中，align-items 控制的是水平对齐，而高度自适应靠的是 justify-content 和子项自身的 flex 行为——容易混淆主轴/交叉轴。

• 列布局下，主轴是垂直方向，想让子项高度占满应优先用 flex: 1，而非依赖 align-items
• justify-content: stretch 无效（该值不存在），正确方式是让子项设 flex: 1 或容器设 align-items: stretch（仅对行方向有效）
• 典型错误：在 column 容器里给子项写 align-self: stretch 并期待它变高——其实它只影响宽度

.container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 必须设高 */
}
.item {
  flex: 1; /* ✅ 正确：沿主轴（垂直）占剩余空间 */
  /* align-self: stretch; ❌ 对高度无影响 */
}

Flex 高度自适应失败，多数时候不是子项写错了，而是高度传递链断在某一级——从 html 开始逐层检查是否有明确高度或 flex: 1 占位，比反复调子项样式更有效。