此布局不能用于Flex，因为每一行都独立于其他行，并且不能定义列宽。
但是，使用网格的解决方案很简单，因为可以定义列宽。
第一个
在上面的代码中，grid-template-columns定义了两列。
第一个设置为width min-content，这意味着它将调整为可能的最小宽度。
第二个设置为1fr，这意味着它将占用所有剩余空间。

已更新，文本不换行

这里有一个快速的例子，它有望达到预期的结果。
它在发布的HTML结构上工作，只是在<style>中对CSS做了一些更改。
示例：（请使用下面的按钮查看实况）

<style>
div {
  /* 👇 edit left span width here */
  --left-span-width: 150px;
  /* 👇 edit gap of span here */
  --span-gap: 2px;

  display: flex;
  flex-wrap: wrap;
  gap: var(--span-gap);
}

div span:nth-child(odd) {
  width: calc(var(--left-span-width) - var(--span-gap));
  background: red;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

div span:nth-child(even) {
  flex: 1 1 calc(100% - var(--left-span-width));
  background: yellow;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
</style>
<div>
  <span>aaa</span>
  <span>bbbbbb</span>
  <span>ccccccccc ccccccccc ccccccccc</span>
  <span>ddd</span>
  <span>eee</span>
  <span>fff</span>
</div>

第一个