Flex子元素高度塌陷本质是父容器无显式高度且子元素未解除默认min-height限制；必须为父容器设min-height（如100vh）、子元素加min-height: 0，并确保display: flex与align-items: stretch生效。
Flex 布局中子元素“高度塌陷”，本质是它没撑开父容器，或自身高度为 0 —— 这不是 bug，而是 flex 项在交叉轴上默认不拉伸的自然行为。关键在于：父容器有没有可 stretch 的空间，子元素有没有被显式限制高度。
父容器没高度，align-items: stretch 就失效
即使写了 display: flex 和默认的 align-items: stretch，若父容器本身高度由内容决定（比如 height: auto），子元素就无处可 stretch。浏览器会按“内容高度”反推父高，形成死循环。
- 给父容器加
min-height: 100vh或固定height: 400px（适合有明确视口需求的场景） - 若父容器是整页布局，别忘了
html, body { min-height: 100vh; }，否则min-height: 100vh在 body 上可能不生效 - 避免只靠
height: 100%向上传递——它依赖整条祖先链都有明确高度，极难调试且容易断链
子元素写了 height、max-height 或 align-self
align-items: stretch 是默认值，但它会被子元素自身的 height、max-height、min-height 或 align-self 覆盖。常见误写：
-
height: 0、height: auto（尤其在重置样式或第三方组件里） -
align-self: flex-start或align-self: center—— 直接关闭拉伸 -
flex: 0 0 auto类样式（如某些 UI 库的 reset 规则）也会抑制 stretch - 检查 computed 样式里
align-self是否显示为flex-start而非stretch
嵌套 Flex 容器时 flex: 1 不生效
常见于侧边栏 + 主内容区结构：外层 flex-direction: column，主内容区设了 flex: 1，但内部子元素仍不占高。根本原因是该子容器未获得“交叉轴空间”。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 确保它的直接父级有明确高度（如
min-height: 100vh）且是 flex 容器 - 该子容器自己必须同时满足：
display: flex+flex-direction: column+flex: 1+min-height: 0+overflow: auto（或hidden） -
min-height: 0很关键：它允许flex: 1在父容器高度受限时收缩，否则可能因内部内容最小高度撑不开而卡住 -
overflow: auto不只是为了滚动——它触发 BFC，强制浏览器计算该容器高度，否则flex: 1可能渲染为 0
内容溢出导致视觉“塌陷”假象
有时子元素明明有高度，但内容被裁掉、滚动条没出现、背景色看不见——这不是真塌陷，而是 box-sizing 或 overflow 没配对。
- 确认子元素用了
box-sizing: border-box，否则padding和border会让实际高度超出设定值，触发意外溢出 - 若子元素内有绝对定位、浮动或 flex 子项，它们可能脱离文档流，导致父容器无法感知其高度贡献；此时
overflow: hidden或auto是必要兜底 - iOS Safari 对
position: fixed+overflow: hidden有兼容问题，生产环境建议加-webkit-overflow-scrolling: touch
最容易被忽略的是：塌陷往往不是单点问题，而是多层高度约束断裂的结果。用开发者工具逐层看 computed height，从 html 开始查起，比猜样式更可靠。
