如何在flex-wrap容器中让列占可用空间，使固定列始终新行起始

原布局代码 #

CSS #

.container {
  background-color: yellow;
  display: flex;
  flex-wrap: wrap;
}

.col-x {
  flex: 0 0 5rem;
  background-color: red;
}

.col-y {
  flex: 1 0 auto;
  background-color: green;
}

HTML #

<div class="container">
  <div class="col-x">X</div>
  <div class="col-y">Y</div>
  <div class="col-x">X</div>
  <div class="col-y">Y</div>
</div>

需求 #

• 容器宽度可变
• col-x保持固定宽度
• col-y占据当前行剩余空间，且每个col-x始终从新行开始

当前问题 #

使用flex: 1 0 auto时，col-y仅适配自身内容宽度，无法占满容器剩余空间；若将col-y宽度设为100%，则会直接换行到新行，破坏x+y的同行布局。

解决方案 #

方案一：添加行容器（推荐） #

通过给每一组col-x和col-y包裹行容器，确保每组独占一行，结构更清晰：

修改后的HTML

<div class="container">
  <div class="row">
    <div class="col-x">X</div>
    <div class="col-y">Y</div>
  </div>
  <div class="row">
    <div class="col-x">X</div>
    <div class="col-y">Y</div>
  </div>
</div>

新增CSS

.row {
  display: flex;
  width: 100%;
}

方案二：通过计算flex-basis实现（无需修改HTML） #

直接修改col-y的flex属性，将其基础宽度设为容器宽度减去col-x的固定宽度，确保它能占满剩余空间：

修改后的CSS

.col-y {
  flex: 1 0 calc(100% - 5rem);
  background-color: green;
}

两种方案都能满足需求：容器宽度变化时，col-x保持固定宽度，col-y自动填充剩余空间，且每个col-x都从新行开始。

内容的提问来源于stack exchange，提问作者Saurabh