CSS Flexbox: Use available space after reflow-CodePudding

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

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!

CodePudding user response：

I might have misunderstood your question, but :

.ui-g {
    display: flex;
    flex-wrap: wrap;
    white-space: nowrap; /* text wont go to next line on resize */
}
.ui-g > div {
    min-width: 180px;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
}

CodePudding user response：

Using flex-basis instead of min-width and adding flex-grow should get you there:

.ui-g {
  display: flex;
  flex-wrap: wrap;
  outline: #0FF6 solid;
  outline-offset: 3px;
  margin: 1em;
}

.ui-g>div {
  flex-basis: 180px;
  flex-grow: 1;
  box-sizing: border-box;
  margin: 0 auto;
  outline: #F0F6 solid;
  outline-offset: 0px;
}

<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>

<div class="ui-g" style="width: 300px">
  <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>