继承多行内联子元素的宽度

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>

社会保障体系：

.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%。将包装元素设置为您喜欢的最大宽度。