在绝对定位容器中，子元素无法自动响应父级 max-width，需通过显式设置包含块宽度（如 .abs { width: 100% }）并确保父元素成为有效包含块，才能使 width: 100% 真正参照父级 max-width 计算。
在绝对定位容器中，子元素无法自动响应父级 `max-width`，需通过显式设置包含块宽度（如 `.abs { width: 100% }`）并确保父元素成为有效包含块，才能使 `width: 100%` 真正参照父级 `max-width` 计算。
在 CSS 布局中，position: absolute 的元素会脱离文档流，其 width: 100% 并非继承视觉父元素的宽度，而是参照其包含块（containing block）——即最近的、position 值为 relative/absolute/fixed/sticky 的祖先元素。若该祖先（如示例中的 .abs）本身未定义可计算宽度，浏览器将回退到初始包含块（通常是视口），导致 width: 100% 失效，子元素无法受 .parent { max-width: 300px } 约束。
✅ 正确解法需满足两个前提：
- .abs 必须成为可计算宽度的包含块：为其显式设置 width（如 width: 100%），且其自身必须有明确的宽度上下文（例如其父级有 width、或它位于 flex/grid 容器中）。
- .parent 必须是 .child 的直接包含块或其上级包含块：但注意——.parent 本身无需 position: relative，只要 .abs 已建立包含块且宽度可计算，.child { width: 100% } 就会基于 .abs 的宽度计算；而 .parent { max-width: 300px } 作为普通块级容器，会自然限制其子元素的内容区最大宽度（即 .child 的实际渲染宽度不会超过 300px）。
以下是推荐的最小可行实现：
.abs {
position: absolute;
top: 50px;
width: 100%; /* ✅ 关键：赋予包含块明确宽度 */
/* 若 .abs 父级无宽度，此处 100% 仍可能无效 → 需确保其祖先有宽度约束 */
}
.parent {
max-width: 300px; /* ✅ 子元素内容宽度上限 */
margin: 0 auto; /* 可选：水平居中 */
}
.child {
width: 100%; /* ✅ 相对于 .abs 宽度计算 */
background-color: lightblue;
padding: 8px;
box-sizing: border-box;
}
<!-- 普通上下文（正常工作） -->
<div class="parent">
<div class="child">Foo</div>
</div>
<!-- 绝对定位上下文（修复后） -->
<div class="abs">
<div class="parent">
<div class="child">Bar</div>
</div>
</div>
⚠️ 注意事项：
- 若 .abs 的父级是 display: inline-block 或浮动容器且未清除，其 width: 100% 可能塌陷为 0。建议用 DevTools 查看 .abs 的 Computed → width 是否为有效像素值。
- 不要依赖 left: 0; right: 0 替代 width: 100%：它虽可拉伸元素，但会忽略 max-width 限制，且易因 padding 导致溢出。
- 若需更高兼容性或动态内容场景，可配合 min-width: fit-content 或现代方案 width: -moz-max-content（仅 Firefox），但主流项目推荐以 width: 100% + max-width 组合为主。
- 对于多层嵌套绝对定位，务必逐层检查包含块是否已正确定位（position ≠ static）且宽度可计算——漏掉任一环，100% 即失效。
简言之：绝对定位不是“黑盒”，而是“坐标系切换”。要让子元素尊重父级 max-width，先确保它的定位坐标系（即包含块）本身有清晰的宽度边界。
