当父容器使用 flex-direction: column 和 flex-grow: 1 动态分配高度时，内部深层嵌套的高尺寸子元素默认会强制扩大整个 flex 链的高度；本文介绍通过 position: absolute 结合 position: relative 定位上下文，实现子元素安全溢出而不影响布局流的优雅解法。
当父容器使用 `flex-direction: column` 和 `flex-grow: 1` 动态分配高度时，内部深层嵌套的高尺寸子元素默认会强制扩大整个 flex 链的高度；本文介绍通过 `position: absolute` 结合 `position: relative` 定位上下文，实现子元素安全溢出而不影响布局流的优雅解法。
在 Flexbox 布局中，尤其是垂直方向（flex-direction: column）且依赖 flex-grow: 1 自适应高度的场景下，一个常见陷阱是：深层嵌套的、具有显式大尺寸（如 height: 600px）的子元素，会突破其 flex 容器的自然约束，导致整条 flex 父链被“撑高”——即使顶层容器已设 height: 100vh，最终仍可能超出视口。
根本原因在于：Flex 项默认遵循 content-based minimum size（内容最小尺寸规则），即 min-height: auto（等效于 min-height: min-content）。这意味着即使设置了 flex-grow: 1，浏览器仍会优先保障子元素内容（含显式 height）不被裁剪，从而破坏父容器的高度控制。
✅ 推荐解决方案：脱离文档流 + 定位上下文约束
不依赖逐层添加 overflow: auto（易引发滚动条污染与维护成本），而是让“越界”元素脱离 flex 主轴流：
#grandchild {
flex-grow: 1;
border: 10px solid green;
box-sizing: border-box;
position: relative; /* 创建定位上下文，使绝对定位子元素相对它计算 */
}
#grandgrandchild {
position: absolute; /* 脱离 flex 流，不再参与 height 计算 */
top: 0; right: 0; bottom: 0; left: 0; /* 可选：铺满父容器区域 */
height: 600px; /* 此高度不再影响父级 flex 分配 */
width: 100%;
border: 10px solid blue;
box-sizing: border-box;
}⚠️ 关键注意事项：
-
position: absolute必须配合其最近的非static定位祖先（即position: relative/absolute/fixed/sticky）才能正确参照。因此#grandchild必须显式设为position: relative。 - 若需保持内容可滚动，可在
#grandgrandchild外层包裹一个position: relative; overflow: auto的容器，而非直接在 flex 链上加overflow。 - 绝对定位后，该元素将忽略
flex-grow、margin对齐等 flex 特性，需用top/left/right/bottom或transform手动控制位置。 - 若存在多个同类“越界”子元素，建议统一抽象为
.overflow-abs类，提升可维护性。
? 总结：相比全局 overflow: auto 的侵入式方案，position: absolute + relative 是语义清晰、层级解耦、性能友好且符合 CSS 定位规范的标准实践——它不改变 flex 布局逻辑，仅让特定子元素“视觉上溢出”，真正实现「父控高、子自溢」的设计意图。
