Pourquoi mon enfant Flex dépasse-t-il la taille de son parent dans Firefox mais pas dans Chrome ?

Empêcher un élément flexible enfant de dépasser la taille du parent

Lorsqu'un conteneur flexible contient un élément enfant avec à la fois flex: 1 et overflow-y : faites défiler, une divergence entre Chrome et Firefox apparaît. Dans Chrome, l'élément enfant se développe pour remplir l'espace restant sans dépasser la hauteur du parent, ce qui entraîne des barres de défilement visibles. Dans Firefox, cependant, la hauteur de l'élément enfant augmente, sortant du parent.

Solution

Pour résoudre ce problème dans Firefox, remplacez flex: 1 par flex : 1 1 1px. Cela définit une base minimale fixe de 1 px, garantissant que l'élément enfant ne dépasse pas la taille du parent même en cas de débordement de contenu.

Code révisé

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

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

Cette modification garantit que les éléments enfants se développent pour remplir l'espace disponible tout en restant contenus dans le conteneur flexible. Des barres de défilement apparaîtront dans Chrome et Firefox, permettant aux utilisateurs d'afficher le contenu au-delà de la zone visible.

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!