position: absolute 元素脱离文档流，父容器布局时直接忽略其尺寸；overflow: hidden 和 display: flow-root 无法解决此问题，因它们仅影响浮动和BFC，不处理脱离流元素；getBoundingClientRect().height 和 offsetHeight 反映自身盒模型而非相对父容器的占位；需用 ResizeObserver 动态计算所有 absolute 子元素最大 bottom 值减去父 top 与 border-top/padding-top，设为父 min-height；语义上须判断该 absolute 元素是否真属父内容流，否则不应撑高父容器。
因为 position: absolute 的元素彻底脱离文档流，父容器在布局计算阶段就“忽略”它——这不是 bug，是 CSS 规范明确定义的行为。
为什么 overflow: hidden 或 display: flow-root 都没用
这些方案专为解决 float 塌陷设计，和 absolute 无关：
• overflow: hidden 虽能创建 BFC，但 BFC 不会把 absolute 子元素纳入高度计算
• display: flow-root 同样只影响浮动和块级格式化上下文，对脱离流的元素无感知
• 给父元素加 position: relative 只是提供定位上下文，不改变高度计算逻辑
为什么 getBoundingClientRect().height 和 offsetHeight 不能直接拿来设父高
它们返回的是元素自身的盒尺寸，不是它在父容器坐标系中的实际占位：
• offsetHeight 是元素渲染后的 clientHeight + border + padding，不含 top/bottom 偏移
• getBoundingClientRect().height 是视口坐标下的矩形高，也不反映相对于父容器的底部落点
• 真正要算的是所有 absolute 子元素中最大的 rect.bottom，再减去父容器的 rect.top，还得扣掉父容器的 padding-top 和 border-top
怎么用 ResizeObserver 动态补足父容器最小高度
这是目前最稳的 JS 方案，比 requestAnimationFrame 更精准：
• 对每个 position: absolute 子元素调用 ro.observe(el)
• 回调里统一获取 el.getBoundingClientRect()，取所有 bottom 的最大值
• 减去父容器的 getBoundingClientRect().top，再减去父容器的 clientTop（含 border + padding）
• 写入父容器的 style.minHeight，而非 height，避免内容溢出被截断
• 若子元素用了 transform: scale()，getBoundingClientRect() 已自动包含缩放效果，无需额外换算
立即学习“前端免费学习笔记（深入）”；
最容易被忽略的其实是语义判断：这个 absolute 元素，是否真的属于父容器的内容流？如果只是右上角徽章或背景浮层，就不该让它撑高父容器——强行修复，只会让结构越来越难维护。
