Html 继承多行内联子项'；s宽度

我想创建一个将继承其子宽度的div

当子级只有一行时，它可以工作，但当它变为多行时，父级将获得“最大宽度”属性的宽度

HTML:

Jsfiddle：

预期结果：

编辑 以下是我试图实现的目标的对比（当然是以一种反应灵敏、优雅的方式）：

有人知道怎么修吗

---

非常感谢

给它一个用html编写的包装器元素。然后将两个div的宽度设置为100%。将包装器元素的最大宽度设置为任意宽度。

您的“CSS”小于或等于SCSS；实际上不是CSS。实际上我不明白你想要什么。对我来说，你似乎已经在那里了。这有点令人困惑。你希望

消息内容

的宽度与

span

的宽度相同吗？@MattSpinks完全一样（不包括填充），如果我正确理解你的要求。。。你不能，这不是线盒模型的工作方式。请注意，这不会将包装宽度更改为最小可能的毫米。您可以尝试使用css表属性@请你把你的想法改成这把小提琴好吗？现在我明白你的意思了。我被难住了。

<div class="message-content">
    <span>Lorem ipsumdolor ipsum dolorsit ametipsumdolor ipsum dolor sit amet ipsumdolor ipsum dolor sit amet</span>
</div>

.message-content {
    max-width: 450px;
    background: green;
    padding: 15px;
    border-radius: 3px;
    display: inline-block;
    span {
       background:red;
    }
}