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

有没有办法告诉flexbox项目填充剩余空间，但一旦它们变得比内容小，就立即进行包装

不过，有些项目有固定的百分比宽度

HTML

我希望固定宽度项目（绿色）的宽度始终为33.333%。其他项目（红色）应填满剩余空间。如果屏幕越来越小，如果没有足够的空间显示其内容，我希望项目包装

---

我想我可以简单地在容器上使用

flex:1

和

flex-wrap:wrap

来做类似的事情，但是正如您在文章中看到的，它根本没有包装。如果我删除

中的
flex:1
.grid\uuuu item

中的

flex:1，它们有点像包装，但不是一直到非常小的屏幕大小。
你当然可以允许包装，但我不能完全确定效果是你想要的。如果你有一个图像，你希望这是如何照顾包装，我们可以从那里加强



*{
框大小：边框框；
}
.电网{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
背景：灰色；
}
.grid\u项目{
背景：红色；
弹性：10自动；
填充：1em；
}
.三分之一{
弹性：0.33.333%；
背景：绿色；
边框：1px实心浅绿色；
}

Lorem ipsum dolor sit amet
第33.333栏%
第33.333栏%
Lorem ipsum dolor sit amet，
设置
flex:1
它将无限期收缩，因为它意味着
flex-grow:1；弹性收缩：1

尝试设置
flex:10自动

谢谢，这很有效。由于您添加了填充，我建议在笔中使用
box size:border-box
，以确保33.333%实际上看起来像三分之一。那么
flex:1
是
01 auto
的快捷方式吗？这很奇怪，我认为“1”代表第一个参数（flex-grow），flex-shrink（第二个参数）将返回到0…@demrks实际上
flex:1
将
flex-grow:
设置为1，但“flex-shrink:1”是默认值，因为您的问题在于收缩部分_
<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>

.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;
}