Flexbox：填充剩余空间但仍然换行

Question

有没有办法告诉 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 中看到的那样，它根本不会换行。如果我在.grid__item 中删除flex: 1，它们会自动换行，但不会一直缩小到非常小的屏幕尺寸。

Answer 1

您当然可以允许包装，但我不完全确定效果是您所追求的。如果您对包装后的外观有您的期望，我们可以从那里进行改进。

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

设置flex:1会无限缩小，因为这意味着flex-grow:1 ;flex-shrink:1

尝试设置flex: 1 0 auto;

Pen