How to avoid empty space in a flex flex-wrap container [duplicate]

I've created a div container, which includes a badges container and a more badge container. (See below).The badges container has display flex flex-wrap overflow hidden and a max-height. I have a hook that checks which childs are not within the container height so I can calculate the amount of badges that are not displayed.The container gets an empty space to the right of it and it makes a huge gap between the badges container and the more badge. I want to avoid that empty space so they will be close to each other.How can I do it?(I have added red background to indicate the empty space)

here is the example,JSX:

<div className="main-container"><div ref={containerRef} className="badge-container">    {badges.map((badge) => (<div className="badge" key={badge.value}>        {badge.label}</div>    ))}</div>  {Boolean(hiddenItemsCount) && (<div className="badge more">+{hiddenItemsCount} more</div>  )}</div>

CSS:

.main-container { display: flex; width: 100%; background-color: red;& > .badge-container {  display: flex;  flex-wrap: wrap;  overflow: hidden;  gap: 8px;  max-height: 34px;}}.badge {  height: 20px;  border-radius: 5px;  background-color: gray;  padding: 7px 5px;&.more {    white-space: nowrap;    background-color: blue;  }}