Flexbox: Fill remaining space but still wrap

Question

Is there any way to tell flexbox items to fill the remaining space but wrap as soon as they are getting smaller than their content.

Some of the items have a fixed percentage width though.

HTML

<div class="grid">
  <div class="grid__item">column auto</div>
  <div class="grid__item one-third">column 33.333%</div>
  <div class="grid__item one-third">column 33.333%</div>
  <div class="grid__item">column auto</div>      
</div>

CSS

.grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background: gray;
}

.grid__item {
  background: red;
  flex: 1;
}

.one-third {
  flex-basis: 33.333%;
  background: green;
}

I want the fixed width items (green) to always have a width of 33.333%. The other items (red) should fill the remaining space. If the screen is getting smaller I want the items to wrap if there is not enough space to show their content.

I thought I could simply use flex: 1 and flex-wrap: wrap on the container to do something like this, but as you might see in the pen it doesn't wrap at all. If I remove flex: 1 in .grid__item they kind of wrap, but not all the way down to very small screen sizes.

Answer 1

You can certainly allow for wrapping but I'm not entirely sure the effect is what you are after. If you have an image of how you expect this to look after the wrap we can enhance from there.

Codepen Demo

* {
  box-sizing: border-box;
}
.grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background: gray;
}
.grid__item {
  background: red;
  flex: 1 0 auto;
  padding: 1em;
}
.one-third {
  flex: 0 0 33.333%;
  background: green;
  border: 1px solid lightgreen;
}

<div class="grid">
  <div class="grid__item">Lorem ipsum dolor sit amet</div>
  <div class="grid__item one-third">column 33.333%</div>
  <div class="grid__item one-third">column 33.333%</div>
  <div class="grid__item">Lorem ipsum dolor sit amet,</div>
</div>

Answer 2

setting flex:1 it will shrink indefinitely because it means flex-grow:1 ;flex-shrink:1

try setting flex: 1 0 auto;

Pen