Inherit multi-line linear child width

Question

I would like to make a div that inherits its width.

It works when the child has only one line, but when it becomes multi-line, the parent gets the width of the max-width property.

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/

Expected Result:

EDIT Here is a comparison of what I'm trying to achieve (in a responsive and elegant way, of course): https://jsfiddle.net/q0axyfp3/5/

Does anyone know how to fix this?

Many thanks

Answer 1

, html. div 100%. , .