Problema de desbordamiento-Y de Flexbox con elementos anidados en Firefox

En un diseño CSS que usa flexbox, donde los elementos anidados están contenidos dentro de un flexbox principal elemento, es posible que overflow-y no funcione como se esperaba en Firefox. Este problema surge específicamente cuando al elemento anidado se le asigna una propiedad de desbordamiento automática.

Explicación del problema:

Los elementos de Flexbox calculan automáticamente su tamaño mínimo en función del valor intrínseco tamaño de sus elementos secundarios. Sin embargo, cuando hay elementos secundarios con propiedades de desbordamiento aplicadas, como overflow-y, el elemento flexible mantendrá un tamaño mínimo equivalente al contenido del niño, incluso si excede el espacio disponible.

Solución :

Para resolver este problema en Firefox, es necesario establecer explícitamente la propiedad min-height del elemento flexible principal en 0. Esto deshabilita el comportamiento de tamaño mínimo predeterminado y permite la flexibilidad. elemento para reducirse por debajo del tamaño mínimo de contenido del niño.

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

Al aplicar esta solución, el elemento anidado con overflow-y: auto ahora podrá reducirse y mostrar una barra de desplazamiento cuando su contenido exceda la altura disponible.

Ejemplo de código :

Considere el siguiente código HTML y 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;
}

Con este código, el elemento anidado tendrá una barra de desplazamiento en Firefox, lo que permitirá a los usuarios ver el contenido desbordado.