Адаптивные элементы Flexbox скрывают элементы, если нет места

#javascript #css #flexbox

Вопрос:

Скриншот того, что я пытаюсь внедрить У меня есть требование, чтобы flexbox показывал элементы, которые он может разместить, а остальные элементы не должны быть видны. Также здесь у каждого элемента есть div наложения, который будет отображаться при наведении курсора.

Я попытался сделать эту гибкую коробку для обертывания и зафиксировал высоту и установил переполнение-y: скрыто. И я смог динамически удалять/показывать элементы в зависимости от размера экрана. Но так как я установил фиксированную высоту, при наведении курсора на любой элемент не отображается соответствующий элемент наложения.

PFB для CSS

 enter code here
.facets-container {
    display: flex;
    flex-wrap: wrap;
    height: 38px;
    overflow-x: hidden;
    overflow-y: hidden;
  }