如何让inline-block父元素宽度完全匹配带换行的inline子元素？

当子元素设为inline、父元素设为inline-block时，文本不换行时父元素宽度贴合正常，但文本换行后父元素会出现多余的红色区域（超出文本实际范围），想要父元素随窗口缩放且完全贴合文本宽度，这里有几个优雅的解决方案：

方案1：使用width: fit-content（推荐） #

直接给父容器添加width: fit-content属性，让父元素宽度收缩到刚好适配文本实际占用的空间：

修改后的CSS代码：

div.container{
    display: inline-block;
    background-color: red;
    width: fit-content; /* 核心修复 */
}

span.text{
    font-size: 50px;
    display: inline;
    background-color: blue;
}

fit-content会自动根据文本换行后的实际宽度调整父元素尺寸，窗口缩放时也能实时贴合，完全消除多余的红色区域。

方案2：改用display: table作为父容器 #

如果需要更好的兼容性（比如适配旧版浏览器），可以把父容器的display改成table，table元素默认宽度就是收缩包裹内容的：

修改后的CSS代码：

div.container{
    display: table;
    background-color: red;
}

span.text{
    font-size: 50px;
    display: inline;
    background-color: blue;
}

这种方式不需要额外设置宽度属性，父元素会自动贴合文本换行后的宽度，效果和方案1一致。

原代码问题原因 #

原代码中inline-block父元素的width: auto，在文本换行时会取包含块的可用宽度作为自身宽度，而不是文本实际占用的宽度，所以会出现文本后多余的红色区域。上面两种方案都是改变了父元素的宽度计算逻辑，让它完全基于内容尺寸来调整。

内容的提问来源于stack exchange，提问作者simon