Why does increasing text length in the flex item cause the previous flex item to shrink? [duplicate]

I have a parent container main-wrapper. It's a row flex box that has two div flex items.

The second div item has flex-grow: 1 so the item takes up the remaining space. The text inside each div item takes up less than a line. When I increase the text length of the second div item to take up multiple lines, it causes the first div item to shrink in width and break the text.

Here's a snippet showing this. When you click the button it'll increase the text length.

function changeText(){    const col2Text = document.getElementById("column-2");    col2Text.textContent = "I'm a very long text that will cause the first column text to break and text to shift downwards making the box smaller";}

#main-wrapper{  background: black;  margin: 0px auto;  width: 400px;  height: 800px;  display: flex;}#column-1{  background: red;  text-align: left;}#column-2{  background: yellow;  text-align: left;  flex-grow: 1;}

<button onclick="changeText()">Change text</button><div id="main-wrapper"><div id="column-1">I'm column 1.</div><div id="column-2">I"m column 2.</div></div>

Can someone explain why this occurs? I would have assumed the first div item would have taken all the space it needed. Then the second div item would have stayed the same width due to flex-grow: 1 and break when the text reached the end.

What are some common ways of handling this? One fix I had was just setting a fixed width on the first div item.