CSS Flexbox: Linebreak and re-adjust width

Question

I'm using flex-box and am trying to insert a line-break. As in, all further flex-items start from next row of flex-box. However, width of the flex-box-container is not shrinking to fit the contents.

I'm using flex-box because I need to re-order the html elements

#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>

In above example, I'm trying to remove the extra green space that appears on the right side of the first row. I'm trying to shrink the flex container to fit and am not trying to expand the items to fill up the space