绝对定位子元素不撑开flex父容器是css规范行为，因其脱离文档流，flex容器无法感知其存在；解决方法包括改用flex/grid原生对齐、插入占位元素或js动态计算高度。
绝对定位子元素不撑开 flex 父容器，不是 bug，是 CSS 规范的必然结果：它已脱离文档流，flex 容器压根“看不见”它。
position: absolute 让元素彻底退出 flex 布局计算
flex 容器只基于参与文档流的直接子项（即 flex items）做尺寸分配、对齐和拉伸。一旦子元素设了 position: absolute，它就不再是 flex item——浏览器会跳过它，既不计入主轴/交叉轴尺寸，也不触发 align-items: stretch 或任何 flex 生长逻辑。
这不是 flex 特有行为，换成 display: block 或 display: grid 父容器，结果一样。只是 flex 常被误认为“智能自适应”，问题才显得更隐蔽。
- 即使父容器写了
height: 100%或min-height: 100vh，也不会因此“拉住” absolute 子元素 -
overflow: hidden、border、padding都无法让父容器重新感知 absolute 元素的存在 - 用 DevTools 查看父容器的
computed height，大概率是0px或auto，这就是最直接的证据
为什么 top/left 不参考 flex 容器的 content box
absolute 元素的 top、left 等偏移值，参考的是「最近的已定位祖先」（即 position: relative、absolute 或 fixed 的祖先），而不是 flex 容器的内容区域（content box）。
如果父 flex 容器没显式设 position: relative，浏览器就会继续向上找——可能落到 body 或 html 上，导致定位完全失控。
- 常见错误：
.parent { display: flex; }但没加position: relative，子元素却写top: 20px→ 实际相对于视口定位 - 即使加了
position: relative，父容器自身高度为0（因所有子项都 absolute），top: 50%也会算出0px，居中失效 - transform（如
translate(-50%, -50%)）的百分比始终基于元素自身尺寸，与父容器是否 flex 无关
想让它“看起来定位”又“实际撑开父容器”，该怎么做
核心思路不是硬让 absolute 参与布局，而是换一套不脱离流的实现方式，让视觉效果和布局贡献同时成立。
- 右上角图标？用
margin-left: auto+align-self: flex-start，或父容器设justify-content: flex-end; align-items: flex-start - 居中遮罩？改用
display: grid; place-items: center，语义清晰且天然撑高 - 必须保留 absolute（如动画层、第三方组件）？在父容器里塞一个占位元素：
::after { content: ""; display: block; height: 24px; }，或用 JS 动态读取getBoundingClientRect().bottom设置父容器height - 避免混用陷阱：不要在 flex 容器里一边写
justify-content: center，一边给子元素加position: absolute—— 两者逻辑冲突，调试时永远找不到原因
最容易被忽略的点：问题往往不出在子元素怎么写，而在于你一边想用 flex 的声明式布局，一边又用 absolute 强行接管坐标。它们根本不在同一个抽象层级上，强行共存只会让尺寸和定位都变得不可预测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
