绝对定位元素在Flex容器中“被压缩”实为父容器尺寸塌缩所致，因其不参与Flex布局，flex-shrink对其无效；真正需约束的是父容器宽高或其流内子项的收缩行为。
绝对定位元素在 Flex 容器里被“压缩”，根本不是它被 flex-shrink 影响了——position: absolute 的元素压根不参与 Flex 布局计算，它不会 shrink，也不会 grow，更不会被对齐。你看到的“被压缩”，其实是视觉错觉或布局前提崩塌导致的定位失效。
为什么position: absolute子元素看起来被压扁了
现象：给 <img alt="为什么CSS绝对定位元素在Flex弹性伸缩时被压缩" > 加了 position: absolute，又放在 display: flex 的父容器里，结果图片变窄、失真、甚至缩成一条线。
- 真正原因不是
absolute被压缩，而是它的**直接父容器**（即那个 flex 容器）因内部其他子项塌缩或未设尺寸约束，自身高度/宽度收缩了，导致absolute元素的定位参考框（content box）变小，而图片仍按原始比例渲染，视觉上就“撑出框外”或“被裁掉” -
absolute元素的top/left是相对于父容器 content box 计算的，但父容器若没设width/min-width或height/min-height，它的尺寸就由流内子项撑开；一旦流内子项被flex-shrink: 1压缩、文字换行、图片塌缩，父容器就跟着塌，absolute就“悬空”在了一个变小的框里 - 常见误判：在 DevTools 里看到图片 computed
width变小了，就以为是它被 flex-shrink 改了——其实那是浏览器在 content box 缩小后，按object-fit或默认拉伸规则重新渲染的结果
absolute 元素的父容器必须有明确尺寸约束
Flex 容器本身要能“兜住”绝对定位元素，就得先稳住自己的边界。否则再怎么调 top/left 都没意义。
- 父容器必须显式设
width或min-width（主轴为 row 时），或height/min-height（主轴为 column 时） - 避免依赖内容撑高：比如父容器只含一个
absolute图片和一个flex: 1的空 div，后者会塌成 0 高，整个父容器 height = 0 - 临时验证法：给父容器加
outline: 1px solid red，hover 子元素看 outline 是否稳定包裹预期区域；如果 outline 闪烁或收缩，说明父容器尺寸不稳定
为什么加了 flex-shrink: 0 还不管用
给 absolute 元素自己写 flex-shrink: 0 是完全无效的——它已经脱离文档流，flex-shrink 属性对其不解析。
立即学习“前端免费学习笔记（深入）”；
- 真正该加
flex-shrink: 0的，是父容器里**其他流内子项**。比如一个 flex 容器里有absolute头像 + 一段文字描述，文字描述被压缩导致父容器高度塌陷，头像就“掉下去”了 - 若头像本身是
<img alt="为什么CSS绝对定位元素在Flex弹性伸缩时被压缩" >且作为 flex item（即没加absolute），那才需要flex-shrink: 0+min-width: 0配合防止被压扁 - 混淆点：有人把
absolute元素包进一个relativewrapper，再把这个 wrapper 当作 flex item ——此时flex-shrink: 0应加在 wrapper 上，而不是里面的absolute元素
替代方案比硬上 absolute 更可靠
绝大多数所谓“需要 absolute 定位”的场景，在 Flex 布局里都有更健壮的原生解法。
- 右上角关闭按钮？用
justify-content: flex-end+align-items: flex-start，按钮保持static即可 - 图层叠加（如带遮罩的卡片）？用
position: relative在父容器上，absolute子元素在其内部定位，同时确保父容器有固定宽高或最小约束 - 需要脱离流但又要影响尺寸？改用
position: sticky（注意兼容性），或用伪元素::before/::after模拟浮层，它们仍参与父容器尺寸计算
真正容易被跳过的是：确认 absolute 元素的**最近定位祖先是否就是你认为的那个父容器**，以及这个父容器的尺寸是否真的稳定——这两点比调任何 top 值都关键。
