CSS Flexbox：换行和重新调整宽度

Question

我正在使用 flex-box 并尝试插入换行符。就像在，所有进一步的 flex-items 都从 flex-box 的下一行开始。但是，flex-box-container 的宽度并没有缩小以适应内容。

我使用 flex-box 因为我需要重新排序 html 元素

#flexbox-container {
  display: inline-flex;
  flex-flow: row wrap;
  background-color: lightgreen;
  width: fit-content;
}

#span-1 {
  background-color: yellow;
  order: 1;
}

#span-2 {
  background-color: red;
  order: 2;
}

#flexbox-container::before {
  display: inline-block;
  content: '';
  width: 0;
  order: 3;
  flex-basis: 100%;
}

#span-3 {
  background-color: cyan;
  order: 4;
}

<div id='flexbox-container'>
  <span id='span-1'>This is span 1</span>
  <span id='span-3'>This is span 3</span>
  <span id='span-2'>This is span 2</span>
</div>

在上面的示例中，我试图删除出现在第一行右侧的额外绿色空间。我正在尝试缩小 flex 容器以适应并且不尝试扩展项目以填满空间