Удалить лишнее пространство справа после обертывания элементов с помощью flex-wrap, сохраняя при этом равные интервалы между элементами

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: grid;
  grid-template-columns:1fr 80px;
  gap: 8px;
  /* if you want some max-width, put it here instead*/
  max-width: 500px;
}

.wrap-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px,1fr));
  gap: 8px;
}

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

.non-wrap-item {
  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>

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 8 px 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 8 px from the last visible item < /div> <
            /div> <
            /div>
          )
        }


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

.container {
  display: flex;
  gap: 8px;
}

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

.item {
  flex: 1 0 80px;
  height: 80px;
  background-color: blue;
  color: white;
}

.non-wrap-item {
  flex: 0 0 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>

.container {
  display: grid;
  max-width: 600px; /* move the max-width here */
  grid-template-columns: repeat(auto-fit, 80px); /* 80px columns */
  column-gap: 8px; /* your gap here */
}

.wrap-container {
  display: grid;
  grid-column: 1/-2; /* take all the column minus the last one (the green will take the last one)*/
  grid-template-columns: inherit; /* inherit the same column configuration */
  column-gap: inherit; /* and same gap */
  grid-template-rows: 80px; /* one row equal to 80px */
  grid-auto-rows: 0; /* all the others row equal to 0 */
  overflow: hidden; 
  outline: 1px solid red;
}
/* no need to define width or height for items*/
.item {
  background-color: blue;
  color: white;
}

.non-wrap-item {
  background-color: green;
  color: white;
}

<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 class = "container">
    <div class = "wrap-container">
      <div class = "item">1</div>
      <div class = "item">2</div>
      <div class = "item">3</div>
      <div class = "item">4</div>
      <div class = "item">5</div>
      <div class = "item">6</div>
      <div class = "item">7</div>
      <div class = "item">8</div>
      <div class = "item">9</div>
      <div class = "item">10</div>
      <div class = "item">11</div>
      <div class = "item">12</div>
      <div class = "item">13</div>
      <div class = "item">14</div>
    </div>
    <div class = "non-wrap-item"> I need to be 8px from the last visible item</div>
  </div>
</div>