width: fit-content能用但常失效，因其依赖布局上下文：Flex子项需flex: 0 0 fit-content，Grid列需minmax(0, fit-content())，table-cell/absolute等display类型不支持，且Safari 14.0前需-webkit前缀、IE全系不支持。
width: fit-content 能用，但多数时候写了没反应——不是语法错，而是它根本没进入能计算的上下文。
为什么 width: fit-content 常常不生效
它不是“设了就缩”，而是一套依赖布局上下文的 intrinsic sizing 行为。常见失效场景：
- 父容器是
display: flex，子项默认flex-basis: auto，会直接覆盖width声明，fit-content被忽略 - 元素是
display: table-cell、position: absolute或display: inline，这些 display 类型根本不支持 intrinsic width 计算 - 父容器用了
width: 100%+padding，但没设box-sizing: border-box，导致可用宽度基准错误 - Safari 14.0 及更早版本必须写
width: -webkit-fit-content；IE 全系不支持，连 fallback 都不能靠它兜底
display: inline-block 是更稳的 fallback 方案
它不依赖浏览器版本，从 IE8 就支持，且天然实现“内容决定宽度”：
- 块级元素加
display: inline-block后，宽度回归自然内容宽度（类似行内元素），同时保留块级特性（可设margin、padding、height） - 若需居中，配合父容器
text-align: center即可，不用额外margin: auto - 注意：
inline-block元素间默认有空格间隙，可用font-size: 0或注释消除，或改用flex布局
Grid 和 Flex 场景下怎么让 fit-content 真正起作用
在现代布局中，直接写 width: fit-content 很可能被覆盖，得按规范来：
立即学习“前端免费学习笔记（深入）”；
- Flex 子项：必须显式写
flex: 0 0 fit-content（等价于flex-grow: 0; flex-shrink: 0; flex-basis: fit-content） - Grid 列定义：不能直接写
grid-template-columns: fit-content(200px)，必须套minmax(0, fit-content(200px))；缺了0，空内容或换行文本时可能退化为min-content - 单个 Grid 子项自适应：别动列定义，改用
justify-self: start+width: fit-content更可靠
真正要“包裹文字且自动折行”，别只靠 fit-content
它对不可折行内容（如 white-space: nowrap、长单词、图片）仍按 max-content 计算，容易溢出：
- 想安全收缩又允许折行，优先组合：
width: max-content+overflow-wrap: break-word - 若内容含固定宽子项（如图标+文字），
fit-content会以最宽子项为准，此时加参数限制更稳妥：width: fit-content(280px) - 嵌套在
position: sticky容器中时，父容器必须设width: fit-content才能让 sticky 区域随内容宽度延伸，否则粘性范围会被截断
