Prevent stretching of multiline inside flex container

Question

I have code like this:

<div class="flex-container">
    <div class="flex-inside">Short Text</div>
    <div class="flex-inside">Medium Medium Medium Text</div>
</div>

.flex-container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.flex-inside {
    flex-grow: 0;
}

When container is wide enough to prevent wrapping of "Medium Text", is's all ok and there is a space between elements. But if container is smaller than sum of child blocks, and "Medium Text" wraps into two lines, the second container stretches like as it has "flex-grow: 1", and there is no any free space between elements inside the flex. It is an unexpected result for me... How can I prevent multiline div with "Medium Text" from horizontal stretching in this situation? The actual text width allows to have some free space. Why the block is stretching?

https://codepen.io/alextram/pen/MWBxMoX