Flexbox: Fill Remaining Space but Still Wrap

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.