当父容器使用 flex-direction: column 且子元素依赖 flex-grow: 1 自适应高度时，深层嵌套的高内容子元素会强制扩大整个祖先链高度；本文介绍通过 position: absolute 配合 position: relative 定位上下文，实现内容溢出而非高度扩张的优雅解决方案。
当父容器使用 `flex-direction: column` 且子元素依赖 `flex-grow: 1` 自适应高度时，深层嵌套的高内容子元素会强制扩大整个祖先链高度；本文介绍通过 `position: absolute` 配合 `position: relative` 定位上下文，实现内容溢出而非高度扩张的优雅解决方案。
在 Flex 布局中，flex-grow: 1 虽能灵活分配剩余空间，但其行为本质是「基于可用空间计算尺寸」——而该「可用空间」会动态受子内容影响。尤其当深层嵌套中出现固定大高度元素（如 height: 600px）时，若其父级未显式约束尺寸或脱离文档流，Flex 算法会向上回溯，不断重算祖先容器的“内容高度”，最终导致整条 flex 链被撑开，违背了初始 100vh 的布局意图。
核心解法：脱离文档流 + 定位上下文锚定
无需为每一层中间容器添加 overflow: auto（易引发滚动条干扰、性能损耗及样式污染），只需两步精准控制：
-
为直接承载高内容的 flex 项设置
position: relative—— 创建定位上下文，确保其子元素的绝对定位以它为参考； -
将超高内容元素设为
position: absolute—— 使其完全脱离 flex 流程，不再参与高度计算，自然溢出。
#grandchild {
flex-grow: 1;
border: 10px solid green;
box-sizing: border-box;
position: relative; /* 关键：提供定位锚点 */
}
#grandgrandchild {
position: absolute; /* 关键：脱离 flex 布局流 */
top: 0; right: 0; bottom: 0; left: 0; /* 可选：铺满父容器 */
height: 600px; /* 即使超限，也不影响父级高度 */
width: 100%;
border: 10px solid blue;
box-sizing: border-box;
}
✅ 优势显著：
- 零冗余
overflow属性，避免意外滚动条或裁剪； - 不侵入中间层级结构，无论嵌套多深，仅需修改两级样式；
- 兼容所有现代浏览器（包括 Safari 12.1+），无 CSS Grid 依赖；
- 保持父容器
flex-grow行为不变，其他兄弟元素仍正常分配剩余空间。
⚠️ 注意事项：
- 若
absolute元素需响应式宽度/高度，建议配合inset: 0（等价于top/right/bottom/left: 0）或width: 100%; height: 100%，并确保父级box-sizing: border-box以精确计算； - 绝对定位元素将无法触发布局内联流（如
margin-collapse），若需与相邻元素交互，应改用transform: translateY()等替代方案； - 如需局部滚动，可在
absolute容器内部添加overflow-y: auto，而非作用于 flex 父级。
此方法直击 Flex 布局的计算逻辑本质——不强行压制内容，而是通过定位机制将其“移出”计算范围，是语义清晰、维护成本低的生产级实践方案。
