当容器设为 position: fixed 并同时声明 left: 0 和 right: 0 时，浏览器默认将其拉伸至可用宽度（受 max-width 限制），无法响应子内容宽度。本文介绍通过 width: fit-content 配合合理约束，实现容器宽度随子元素内容自适应收缩的可靠方案。
当容器设为 `position: fixed` 并同时声明 `left: 0` 和 `right: 0` 时，浏览器默认将其拉伸至可用宽度（受 `max-width` 限制），无法响应子元素内容宽度。本文介绍通过 `width: fit-content` 配合合理约束，实现容器宽度随子元素内容自适应收缩的可靠方案。
在 CSS 布局中，left: 0; right: 0 组合常用于水平居中或铺满父容器，但其本质是触发块级盒的“填充式宽度计算”——即浏览器会忽略 width: auto 的自然行为，强制将宽度扩展至 right - left 的可用空间（减去 margin、border 等）。这正是导致 .parentContainer 固定为 520px（max-width 限制下）而无法收缩的根本原因。
要打破这一行为，关键在于显式覆盖默认宽度计算逻辑。width: fit-content 是现代 CSS 中最直接、语义最清晰的解决方案：它指示浏览器将容器宽度设为“包裹其内容所需的最小宽度”，同时仍尊重 min-width、max-width 和 padding 等约束。
以下是修正后的推荐写法：
.parentContainer {
position: fixed;
left: 0;
right: 0;
margin: 0 auto; /* 此处仍有效，用于微调水平位置（当 fit-content 宽度 < 可用宽度时） */
width: fit-content; /* ✅ 核心修复：启用内容自适应宽度 */
min-width: 240px; /* ✅ 保留最小宽度要求 */
/* max-width: 520px; ← 可选：若需上限，建议改用 max-width: 520px；但注意 fit-content 不会主动超出内容所需，除非内容本身超限 */
background-color: pink;
bottom: 20px;
/* 推荐补充：避免因字体渲染差异导致的微小偏移 */
box-sizing: border-box;
}✅ 效果验证：
- 若 .contentContainer 内容总宽（含 padding: 20px）为 206px，则 .parentContainer 实际宽度为 240px（满足 min-width）；
- 若内容扩展至 300px，容器将自动变为 300px；
- 若内容达 550px，且你保留了 max-width: 520px，则容器将被截断为 520px（此时需检查布局是否需响应式调整）。
⚠️ 注意事项与兼容性提醒：
- fit-content 在现代浏览器（Chrome 69+、Firefox 63+、Safari 14.1+、Edge 79+）中已全面支持；若需兼容旧版 Safari（
- 避免与 display: flex 或 display: grid 的父容器混用 fit-content（本例中 .parentContainer 是 fixed 定位，无此冲突）；
- margin: 0 auto 在 fit-content 下依然生效——它会使容器在 left:0/right:0 提供的可用区域内水平居中，而非拉伸后居中，这是实现“底部居中提示框”的理想行为；
- 如需严格对齐子内容边缘（如消除因 text-align 或 inline 元素基线引起的间隙），可在 .childContainer 上添加 text-align: center 或 .contentContainer 设置 display: inline-flex。
总结来说，width: fit-content 是解决“定位容器宽度不随内容收缩”问题的标准化、语义化方案。它无需 JavaScript 计算、不依赖 hack 技巧，且与现有 min-width/max-width/position 规则天然协同，是构建响应式浮动 UI（如 Toast、Bottom Sheet、工具提示）时值得优先采用的核心样式策略。
