Give text width priority over max-width divs while keeping wrapping behavior

Question

With the following code:

<div style="display: flex; flex-direction: row;">
        <div style="max-width: 500px; width: 100%; height: 200px; background-color: red;"></div>
        Hello Multiple words
        <div style="max-width: 500px; width: 100%; height: 200px; background-color: red;"></div>
</div>

The text will wrap to max space space for the left and right divs:

How do I tell the text to take maximum available width so it won't wrap in this case like so:

The goal is not to use whitespace:nowrap, so the text will actually wrap if the parent div doesn't have space. In this case the left and right divs should be treated as 'spare space' that should be taken by the text as needed.