Как избежать пустого пространства в контейнере Flex-Wrap [дублировать] ⇐ Javascript

[Anonymous]

Я создал контейнер для Div, который включает в себя контейнер для значков и большее значение для значков. (См. Ниже).
Контейнер значков имеет скрытый переполнение Flex-Wrap и максимум. У меня есть крючок, который проверяет, какие дети не находятся на высоте контейнера, поэтому я могу рассчитать количество значков, которые не отображаются. Я хочу избежать этого пустого пространства, чтобы они были рядом друг с другом.
Как это сделать?
(я добавил красный фон, чтобы указать пустое пространство)
< /p>


/> Jsx: < /p>


{badges.map((badge) => (

{badge.label}

))}

{Boolean(hiddenItemsCount) && (
+{hiddenItemsCount} more
)}

< /code>
css: < /p>
.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;
}
}


Подробнее здесь: https://stackoverflow.com/questions/795 ... -container