Problème de débordement Flexbox-Y avec les éléments imbriqués dans Firefox

Dans une mise en page CSS utilisant flexbox, où les éléments imbriqués sont contenus dans une flexbox parent élément, overflow-y peut ne pas fonctionner comme prévu dans Firefox. Ce problème survient spécifiquement lorsque l'élément imbriqué reçoit une propriété overflow-y de auto.

Explication du problème :

Les éléments Flexbox calculent automatiquement leur taille minimale en fonction de la taille intrinsèque. taille de leurs éléments enfants. Cependant, lorsqu'il y a des éléments enfants avec des propriétés de débordement appliquées, telles que overflow-y, l'élément flexible conservera une taille minimale équivalente au contenu de l'enfant, même s'il dépasse l'espace disponible.

Solution :

Pour résoudre ce problème dans Firefox, il est nécessaire de définir explicitement la propriété min-height de l'élément flexible parent sur 0. Cela désactive le comportement de taille minimale par défaut et permet à l'élément flexible de se réduire. en dessous de la taille minimale du contenu de l'enfant.

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

En appliquant ce correctif, l'élément imbriqué avec overflow-y: auto pourra désormais réduire et afficher une barre de défilement lorsque son contenu dépasse la hauteur disponible.

Exemple de code :

Considérez le code HTML et CSS suivant :

  

    
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;
}

Avec ce code, l'élément imbriqué aura une barre de défilement dans Firefox, permettant aux utilisateurs de visualiser le contenu débordé.