Я создал контейнер для 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
