当绝对定位子元素设定了 max-width 但内容超出父容器边界时，浏览器默认会压缩其宽度以适应布局；使用 width: max-content 可强制子元素按内容自然撑开，突破边界限制，同时保留 max-width 的上限保护。
当绝对定位子元素设定了 `max-width` 但内容超出父容器边界时，浏览器默认会压缩其宽度以适应布局；使用 `width: max-content` 可强制子元素按内容自然撑开，突破边界限制，同时保留 `max-width` 的上限保护。
在 CSS 布局中，一个常见却易被忽视的问题是：当子元素使用 position: absolute 并设置 max-width 时，若其内容较宽（如长段落文本）且起始位置靠近父容器右边缘，浏览器可能违背直觉地缩小子元素宽度，而非让其自然溢出——即使父容器本身是 position: relative 且未设置 overflow: hidden。
根本原因在于：max-width 在绝对定位上下文中仍受“包含块”（containing block）的隐式约束影响，而浏览器为维持布局稳定性，会对过长内容执行自动换行与收缩处理，尤其当可用水平空间不足时。
✅ 正确解法是显式声明 width: max-content：
#inner {
position: absolute;
left: 300px;
top: 0;
max-width: 240px; /* 仍生效：作为最大宽度上限 */
width: max-content; /* 关键！按内容固有宽度撑开，不妥协 */
border: 4px solid blue;
}
max-content 是 CSS Sizing Level 3 引入的关键字值，表示元素在不换行前提下容纳全部内容所需的最小宽度（即“理想宽度”）。它与 max-width 共存时逻辑清晰：
- 若内容自然宽度 ≤ max-width → 实际宽度 = 内容宽度；
- 若内容自然宽度 > max-width → 实际宽度 = max-width（此时 max-content 不再起作用，由 max-width 截断）。
⚠️ 注意事项：
- max-content 不被 IE 全系支持，现代项目需确认兼容性（Chrome 69+、Firefox 61+、Safari 14.1+ 支持良好）；
- 若需兼容旧浏览器，可考虑 white-space: nowrap + min-width: 0 组合模拟，但会牺牲文本换行能力；
- 避免对含 flex 或 grid 子项的容器滥用 max-content，可能引发嵌套计算异常；
- max-content 仅作用于块级/替换元素的宽度计算，对 inline 元素无效。
总结：width: max-content 是解决“绝对定位子元素被意外压缩”问题的语义化、标准化方案。它既尊重内容本意，又通过 max-width 保留可控性，是响应式弹出层、工具提示（tooltip）、气泡卡片等场景的理想选择。
