absolute定位元素不受flex-shrink控制，因其已脱离flex格式化上下文，不参与flex布局；生效的仅是top/right/transform等定位属性及z-index。
absolute 定位元素根本不受 flex-shrink 控制——它压根就不是 flex 项目，所以调这个属性毫无意义。
为什么 flex-shrink 对 absolute 元素完全无效
一旦元素设了 position: absolute，它就彻底退出 flex 格式化上下文：不参与主轴排列、不响应 justify-content、不计算 flex-grow 或 flex-shrink，连 order 和 align-self 都失效。浏览器在布局阶段直接跳过它，只把它当作“悬浮图层”处理。
- 常见误操作：给
.badge { position: absolute; flex-shrink: 0; }—— 这行 CSS 被忽略，控制台也不会报错，但毫无作用 - 真正起效的只有
top/right/transform等定位属性，以及z-index - 如果发现 absolute 元素“被压缩”或“位置偏移”，问题一定出在父容器尺寸不稳定，而非
flex-shrink
遇到“absolute 元素被 flex 容器挤压/裁切”怎么办
这不是定位冲突，而是父容器没撑开足够空间，或 overflow 处理不当。典型场景：右上角角标在小屏下被截断、弹窗底部按钮消失。
- 确保 flex 容器有
position: relative（提供可靠定位锚点） - 用
min-width/min-height或padding主动预留空间，例如：.card { padding: 12px 24px 12px 12px; }，让右上角留白 - 避免
overflow: hidden在 flex 容器上——它会直接裁掉top/right超出的部分；改用overflow: visible或靠transform绕过裁剪（transform不触发 overflow 截断）
想让绝对定位元素“随 flex 内容自适应位置”？别硬调，换思路
比如希望一个关闭按钮始终贴在内容区右上角，但内容高度不固定。这时候强行用 top: 20px; right: 20px 很容易错位——因为它的参考点是容器 padding 边缘，而内容可能浮动或塌陷。
立即学习“前端免费学习笔记（深入）”；
- 更健壮的做法：用 JS 读取内容区域
getBoundingClientRect()动态设置top/right，或用 ResizeObserver 监听变化 - 纯 CSS 替代方案：把 absolute 元素包进一个
position: relative的 wrapper，该 wrapper 是真正的 flex 项目，再让子元素相对于 wrapper 定位（这样它的 top/right 就基于内容块，而非整个容器） - 如果只是视觉对齐（如居中），优先用
margin: auto或align-self: center，而不是靠left: 50%; transform: translateX(-50%)模拟
真正需要调 flex-shrink 的，永远是那些还留在 flex 流里的元素；一旦加了 absolute，你就已经切换了布局范式——别试图用 flex 规则去管一个脱离流的元素，该放手时就放手。
