Pourquoi Overflow-Y ne fonctionne-t-il pas comme prévu dans Firefox avec les éléments Flexbox imbriqués ?

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 flex 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 dimensionnement minimum par défaut et permet à l'élément flexible de se réduire. en dessous de la taille minimale du contenu de l'enfant.

<code class="css">.parent-flex-item {
  min-height: 0;
}</code>

En appliquant ce correctif, l'élément imbriqué avec overflow-y: auto pourra désormais rétrécir 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 :

<code class="html"><div class="parent-flex-item">
  <div class="nested-element">
    <p>This is a long text that exceeds the available height.</p>
  </div>
</div></code>

<code class="css">.parent-flex-item {
  display: flex;
  flex-direction: column;
  height: 100px;
  min-height: 0;
}

.nested-element {
  overflow-y: auto;
}</code>

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!