Проблема с переполнением Flexbox-Y с вложенными элементами в Firefox

В макете CSS с использованием флексбокса, где вложенные элементы содержатся внутри родительского флексбокса item, overflow-y может не работать должным образом в Firefox. Эта проблема возникает, в частности, когда вложенному элементу присвоено свойство auto с переполнением.

Объяснение проблемы:

Элементы Flexbox автоматически вычисляют свой минимальный размер на основе встроенного размер их дочерних элементов. Однако при наличии дочерних элементов с примененными свойствами переполнения, такими как overflow-y, гибкий элемент будет поддерживать минимальный размер, эквивалентный содержимому дочернего элемента, даже если он превышает доступное пространство.

Решение :

Чтобы решить эту проблему в Firefox, необходимо явно установить для свойства min-height родительского гибкого элемента значение 0. Это отключает поведение минимального размера по умолчанию и позволяет гибкому элементу сжиматься. ниже минимального размера содержимого дочернего элемента.

.parent-flex-item {
  min-height: 0;
}

Применив это исправление, вложенный элемент с параметром overflow-y: auto теперь сможет сжиматься и отображать полосу прокрутки, когда его содержимое превышает доступную высоту.

Пример кода :

Рассмотрите следующий код HTML и CSS:

  

    
This is a long text that exceeds the available height.
  

.parent-flex-item {
  display: flex;
  flex-direction: column;
  height: 100px;
  min-height: 0;
}

.nested-element {
  overflow-y: auto;
}

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