Pourquoi overflow-y ne fonctionne-t-il pas comme prévu dans Firefox avec une disposition flexbox imbriquée ?

Problème de débordement Y de Firefox avec la mise en page Flexbox imbriquée

Dans une mise en page 100 % en largeur et 100 % en hauteur conçue avec une flexbox imbriquée, un résultat inattendu Un comportement est rencontré dans Firefox où overflow-y ne fonctionne pas correctement.

Question :

Pourquoi overflow-y ne fonctionne-t-il pas comme prévu avec le code CSS fourni, ce qui entraîne Firefox doit afficher une barre de défilement incorrecte ?

Réponse :

Le problème survient en raison du comportement de taille minimale par défaut des éléments flexibles. Les éléments Flex dérivent leur taille minimale en fonction de la taille inhérente de leurs enfants, sans tenir compte du débordement-y appliqué à leurs descendants.

Lorsqu'un élément avec débordement-y : [hidden|scroll|auto] est placé dans un élément flex, il est nécessaire de définir min-width:0 (pour les conteneurs flexibles horizontaux) ou min-height:0 (pour les conteneurs flexibles verticaux) sur l'élément flexible ancêtre correspondant. Cela désactivera le comportement de taille minimale par défaut, permettant à l'élément flexible de se réduire en dessous de la taille minimale du contenu de l'enfant.

Pour résoudre le problème, ajoutez min-height:0 à la règle .level-0-row2, comme démontré dans le code CSS mis à jour suivant :

<code class="css">.level-0-row2 {
  ...
  min-height: 0;
  flex: 1;
  border: 1px solid black;
  ...
}</code>

Cela garantit que l'élément flexible .level-0-row2 prend en compte le débordement de ses enfants et lui permet de se réduire en dessous de la taille minimale du contenu, permettant ainsi une bonne comportement de débordement dans Firefox.

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!