absolute子项彻底退出flex计算，因为position: absolute使其脱离文档流，flex容器的布局逻辑（如justify-content、align-items、flex-grow等）仅作用于流内子项，浏览器布局时直接跳过它，既不分配空间也不读取其内容高度。
absolute子项为什么彻底退出flex计算
因为position: absolute会让元素从文档流中被移除，而flex容器的全部布局逻辑——包括justify-content、align-items、flex-grow、尺寸撑开、顺序重排——都只作用于仍在流内的子项。浏览器在布局阶段直接跳过它，既不分配空间，也不读取它的内容高度。
常见错觉：以为父容器是flex就能“管住”absolute子项
这种想法混淆了两个独立机制：display: flex控制的是**流内项目的排列方式**，而position: absolute触发的是**脱离流+定位锚点查找**。两者互不感知：
- 父容器设了
display: flex但没加position: relative→ 子项向上找定位上下文，可能落到body上 - 父容器同时有
display: flex和position: relative→ 子项确实相对它定位，但依然不是flex项目，margin: auto、align-self全无效 - 给子项写
flex: 1又加position: absolute→flex: 1被忽略，宽高退回到auto（由内容决定）
为什么父容器高度经常变成0
当所有直接子元素都是position: absolute时，flex容器找不到任何一个参与流的子项来提供基准尺寸。它就像一个空盒子，height自然坍缩为0px，即使你用DevTools看到子元素“明明在那里”。这不是bug，是规范行为。
验证方法很简单：临时删掉所有子元素的position: absolute，如果父容器立刻恢复高度，就坐实了这个问题。
想“看起来绝对定位”，但又不想丢掉布局参与权
真需要右上角图标、文字末尾按钮这类效果，别硬套absolute。优先走语义化路径：
- 右对齐按钮：
margin-left: auto+align-self: flex-start（父容器display: flex; align-items: center） - 文字末尾浮动按钮：外层
span设display: inline-block; position: relative，按钮放里面并position: absolute; right: 0; top: 50%; transform: translateY(-50%) - 填满整个flex区域：不用
top: 0; left: 0; right: 0; bottom: 0，改用inset: 0更简洁，但前提是父容器已有position: relative
混用flex和absolute本身没问题，但必须清楚谁负责尺寸、谁负责位置——一旦让absolute子项承担“撑开父容器”或“响应文字长度变化”的任务，问题就从CSS进入不可靠的像素推算领域。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
