CSS Flexbox: Use available space after reflow

I got the following situation: My page contains a panel that looks like that in a normal situation.

Text 1                                     Text text lorem ipsum lorem ipsum lorem ipsum

Here's the HTML:

<div class="ui-g">
    <div class="ui-g-6">
        Text 1
    </div>
    <div class="ui-g-6">
        Text text lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
    </div>
</div>

Now, on low resolutions, I want the columns to reflow to a single one what I accomplished by using flexbox:

.ui-g {
    display: flex;
    flex-wrap: wrap;
}
.ui-g > div {
    min-width: 180px;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
}

This means: normally, both columns have a width of 50% (because of ui-g-6) and a min-width of 180px -> if the panel has a lower resolution than ~360px, the reflow happens.

My problem's the following:

When lowering the resolution, the page changes from

Text 1                                     Text text lorem ipsum lorem ipsum lorem ipsum

to

Text 1                                     Text text lorem ipsum lorem ipsum
                                           lorem ipsum

and after the reflow:

Text 1                                                      
Text text lorem ipsum lorem ipsum 
lorem ipsum

As you can see, the content is now unnecessarily narrow, I'd prefer it to look like that:

Text 1                                                      
Text text lorem ipsum lorem ipsum lorem ipsum

I know about flex-grow, but this overrides any width attribute and totally messes up my page layout on normal resolutions. Also, it didn't have the desired effect anyway.

Any tips are much appreciated!