继承多行内联子项的宽度

Question

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

当子只有一行时它起作用，但当它变成多行时，父级获得max-width属性的宽度。

HTML：

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

SCSS：

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

的jsfiddle： https://jsfiddle.net/q0axyfp3/

预期结果：

修改 这是我想要实现的目标的比较（当然是以敏感和优雅的方式）： https://jsfiddle.net/q0axyfp3/5/

有谁知道如何修复它？

非常感谢

Answer 1

给它一个用html编写的包装元素。然后将两个div的宽度设置为100％。将包装元素设置为具有您喜欢的最大宽度。