remove extra space on the right after the wrapping of items with flex-wrap, while maintaining equal spacing between items

I have a list of items that need to be wrapped as the screen gets smaller. There is another item that proceeds them that needs to be kept a particular space from them, specifically 8px.

The issue is, when they begin wrapping, there is a bunch of space left behind from the element that was wrapped.

All items must have 8px in between them, including the one that does not wrap. How can I make it so that there is no empty space?

Here's a working example:

const App = () => {

  return (
    <div>
      <p>see the items below, regardless of how many I have, I need to hide whatever doesn't fit on the line screen.</p>
      <p>All items need to have 8px gap in between them, including the green one which does not wrap.</p>
      <h5>How can this be done?</h5>
      <div className="container">
        <div className="wrap-container">
          {Array.from({ length: 100 }).map((_, index) => <div className="item" key={index}>{index}</div>)}
        </div>
        <div className="non-wrap-item"> I need to be 8px from the last visible item</div>
      </div>
    </div>
  )
}


ReactDOM.render(
    <App />,
    document.getElementById('app')
);

.container {
  display: flex;
}

.wrap-container {
  max-width: 500px;
  display: flex;
  flex-wrap: wrap;
  height: 80px;
  overflow: hidden;
  gap: 8px;
  
  border: 1px solid red;
  margin-right: 8;
}

.item {
  width: 80px;
  height: 80px;
  background-color: blue;
  color: white;
}

.non-wrap-item {
  width: 80px;
  height: 80px;
  background-color: green;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Note: I have seen similar questions, but none of which address the fact that I need 8px gap between items at all times. The ones I've run into I lose that control. Is there anyway around this?

from remove extra space on the right after the wrapping of items with flex-wrap, while maintaining equal spacing between items