Flexbox: заполнить оставшееся пространство, но все еще обернуть

Есть ли способ сказать элементам flexbox, чтобы они заполнили оставшееся пространство, но обернуть, как только они становятся меньше, чем их содержимое.

Однако некоторые элементы имеют фиксированную процентную ширину.

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;

}

Я хочу, чтобы элементы фиксированной ширины (зеленые) всегда имели ширину 33.333%. Остальные элементы (красные) должны заполнить оставшееся пространство. Если экран становится меньше, я хочу, чтобы элементы обернуть, если не хватает места, чтобы показать их содержание.

Я думал, что могу просто использовать flex: 1 и flex-wrap: wrap на контейнере, чтобы сделать что-то подобное, но, как вы можете видеть в pen, он вообще не заворачивается. Если я удаляю flex: 1 в .grid__item, они как бы заворачиваются, но не до самых маленьких размеров экрана.