Problema Flexbox Overflow-Y com elementos aninhados no Firefox

Em um layout CSS usando flexbox, onde os elementos aninhados estão contidos em um flexbox pai item, overflow-y pode não funcionar como esperado no Firefox. Esse problema surge especificamente quando o elemento aninhado recebe uma propriedade overflow-y de auto.

Explicação do problema:

Os itens do Flexbox calculam automaticamente seu tamanho mínimo com base no intrínseco tamanho de seus elementos filhos. Porém, quando houver elementos filhos com propriedades de overflow aplicadas, como overflow-y, o flex item manterá um tamanho mínimo equivalente ao conteúdo do filho, mesmo que exceda o espaço disponível.

Solução :

Para resolver esse problema no Firefox, é necessário definir explicitamente a propriedade min-height do item flexível pai como 0. Isso desativa o comportamento de dimensionamento mínimo padrão e permite que o item flexível diminua abaixo do tamanho mínimo do conteúdo da criança.

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

Ao aplicar essa correção, o elemento aninhado com overflow-y: auto agora será capaz de encolher e exibir uma barra de rolagem quando seu conteúdo exceder a altura disponível.

Exemplo de código :

Considere o seguinte código HTML e 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;
}

Com este código, o elemento aninhado terá uma barra de rolagem no Firefox, permitindo aos usuários visualizar o conteúdo transbordado.