概念

随盒子的内容来决定盒子的宽度

展示

#fit-content {
    background-color: #007AFF;
    width: fit-content;
    height: auto;
 }
 .fit-content {
    background-color: #ff1115;
    width: 100px;
    height: auto;
 }
 <div id="fit-content">
    qweqweqweqweqweqweqweqweqweqweqweqwe
</div>
<div class="fit-content">
    qweqweqweqweqweqweqweqweqweqweqweqwe
</div>

微信截图_20211106204433.png

如果是内联元素要收缩，可以使用 display: inline-block 声明；如果是块级元素要收缩，可以使用 display:table 声明这两种方式效果一样，兼容更好

优势

保护了元素原始的 display 计算值

列如 li 元素要是设置成了 display:table,前面的项目符号就不会出现，::marker伪元素也会失效

让元素有了确定的尺寸

列子：绝对定位元素使用 margin:auto 实现居中效果时需要设置其具体的宽和高的属性，如果绝对定位元素的尺寸不是固定的，可以使用 transform 属性进行偏移，但这个方法会占用 transform 属性，会导致该元素无法使用包含 transform 属性的动画效果。可以设置 width:fit-content,height:fit-content,元素尺寸自适应，同时完全居中。

兼容性

IE浏览器和Edge浏览器不支持 fit-content 关键字
Chrome 浏览器在2021年已经支持
Safari 支持
FireFox 支持