Comment empêcher un élément flexible de dépasser la hauteur du parent et activer la barre de défilement dans Firefox ?

Empêcher les éléments Flex de dépasser la hauteur du parent et activer la barre de défilement dans Firefox

Les conteneurs Flex peuvent être difficiles à gérer, en particulier lorsqu'il s'agit d'éléments enfants qui ont des barres de défilement. Dans Firefox, un div enfant avec une propriété flex: 1 et overflow-y: scroll a tendance à dépasser la hauteur de son conteneur flexbox parent. Ce problème se produit car les navigateurs interprètent différemment le raccourci flex: 1.

Pour résoudre ce problème, remplacez flex: 1 par flex: 1 1 1px. Cette valeur ajustée définit explicitement la base flexible (la largeur ou la hauteur minimale) sur 1 px. Lorsqu'il est utilisé en combinaison avec overflow-y: scroll, il oblige le div enfant à respecter la limite de hauteur du parent et à afficher des barres de défilement si nécessaire.

Voici les ajustements de code spécifiques à effectuer :

<code class="css">#messagelist {
  flex: 1 1 1px; /* new */
}

#messagecontents {
  flex: 1 1 1px; /* new */
}</code>

Avec ces changements en place, le div enfant s'agrandira pour remplir l'espace vertical restant dans le conteneur parent, mais il ne dépassera plus la hauteur du parent. Des barres de défilement apparaîtront lorsque le contenu déborde, permettant aux utilisateurs de faire défiler le contenu verticalement sans que le div enfant ne grandisse indéfiniment.

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!