Css, width parent element exactly like child element with line breaks

Question

I have trouble scaling the parent element exactly like its child element. The child element has 'inline' as display property, the parent has 'inline-block'. When there is no linebreak in the child element, it's perfect. But when line breaks appear, the parent element scales wider than the text, expecting it to become wider as we scale the window.

Here is the css:

div.container{
        display: inline-block;
        background-color: red;
        width: auto;
    }
    
    span.text
    {
        font-size: 50px;
        display: inline;
        background-color: blue;
    }

And here the html:

<div class="container">
    <span class="text">this is a sentance with optional line break</span>
</div>

Very straightforward code. This happens when there is no linebreak: This happens with line-break:

To be clear: I want to get rid of the red after the word 'line'

If fiddled around with a lot of display options, but none seem to work. I hope there is an elegant solution. Thanks for the help