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 阻断自适应
即使外部拉伸成功，子项内部元素若未正确处理高度约束，也会导致视觉上“没撑开”。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 子项内嵌的块级元素（如
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 占位，比反复调子项样式更有效。
