## Pourquoi un élément Flex avec `flex: 1` dépasse-t-il la hauteur de son parent dans Firefox, mais pas dans Chrome ?

Empêcher un élément Flex de dépasser la hauteur du parent et la fonctionnalité de la barre de défilement dans Firefox

Dans Firefox, on observe qu'un élément flexbox enfant avec flex: 1 et overflow- y : le défilement peut dépasser la hauteur de sa flexbox parent, ce qui entraîne un débordement du contenu et l'apparition des barres de défilement. A l'inverse, dans Chrome, l'élément enfant remplit correctement l'espace vertical restant, des barres de défilement apparaissent et la hauteur parent n'est pas dépassée.

Solution

Pour résoudre ce problème, remplacez flex: 1 par flex : 1 1 1px pour les éléments flexbox enfants. Cela définit flex-basis sur une valeur fixe de 1px, garantissant qu'un débordement de défilement se produira et que des barres de défilement apparaîtront.

Explication

Malgré la pratique courante consistant à définir min-height : 0 dans de tels cas , c'est insuffisant dans ce scénario. La règle abrégée flex: 1 inclut flex-basis: 0, qui dans Firefox et Edge est insuffisant pour déclencher un débordement.

Selon MDN :

Pour qu'un débordement ait un effet, le conteneur au niveau du bloc doit avoir soit une hauteur définie (hauteur ou hauteur maximale), soit un espace blanc défini sur nowrap.

Pour garantir un comportement standardisé et activer le débordement, définissez une hauteur fixe pour flex-basis, même une valeur minimale comme 1px.

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!