绝对定位元素宽度“被压缩”是因为其width: auto默认收缩包裹内容，而非填满父容器；width: 100%无效是因参照包含块（最近已定位祖先），若父元素无position: relative等，则参照视口，导致错位而非压缩。
绝对定位元素的宽度“被压缩”，不是被 Flex 或 Grid 主动挤压，而是它自己没拿到明确尺寸参照，又没写 width，结果浏览器按最小内容宽渲染 —— 本质上是“没撑开”，不是“被压扁”。
为什么 width: 100% 没效果？
因为 width: 100% 是相对于「包含块」计算的，而绝对定位元素的包含块是最近的 position: relative、absolute、fixed 或 sticky 祖先。如果父容器没设这些值，包含块就退化成视口（viewport），100% 就变成全屏宽，看起来像“错位”，而不是“压缩”。
- 检查父级是否漏写了
position: relative - 用 DevTools 的 Computed 面板看
width实际计算值和 reference box 是谁 - 若中间某层意外加了
position: absolute，会打断包含块链，导致子元素参考错层
width: auto 在 absolute 下到底怎么算？
width: auto 对绝对定位元素来说，不等于“填满可用空间”，而是“收缩包裹内容”（shrink-to-fit）。没有文字换行、没有图片、没有 min-width，它就缩成一条线甚至 0px。
- 只设
left: 0不设right，width: auto就只占内容宽，跟min-content类似 - 同时设
left: 0和right: 0，width: auto才会拉伸填满包含块 —— 这是关键触发条件 - IE8 及更早不支持
left + right触发拉伸，需降级用width: 100%+ 显式position: relative
拖拽中突然变窄？不是 bug，是自动换行回退
当绝对定位元素被拖出 position: relative 父容器边界时，它脱离原包含块，宽度参照失效，浏览器回退到初始包含块（视口），再配合文本换行规则（如 white-space: normal），就会视觉上“缩小”或换行。
- 解决方法很简单：在拖拽过程中固定宽度，比如
elmnt.style.width = elmnt.offsetWidth + 'px' -
offsetWidth返回含padding和border的实际像素宽，赋值后覆盖自动计算逻辑 - 若需响应式缩放，不能只靠这招，得监听
window.onresize同步更新，或改用transform: scale()配合基准尺寸
真正容易被忽略的点：父容器有没有 position: relative 决定包含块锚点，而 left 和 right 是否成对出现，决定 width: auto 能不能被“唤醒”。这两条不满足，光调 width 属性基本没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
