Comment empêcher les éléments flexibles de dépasser la hauteur du parent et activer la fonctionnalité de barre de défilement dans Firefox ?

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

Firefox se comporte différemment de Chrome lorsqu'il s'agit d'une flexbox spécifique scénario, ce qui fait que la taille du div enfant dépasse la taille du parent. Ce problème survient lorsqu'un div enfant avec une barre de défilement et flex:1 tente de dépasser la hauteur de son conteneur flexbox parent.

Réponse courte

Pour résoudre ce problème, utilisez flex: 1 1 1px au lieu de flex: 1 pour les divs enfants avec overflow-y: scroll. Ce changement dans la règle CSS garantit que la base flexible du div enfant est définie sur une hauteur fixe, résolvant ainsi le problème dans Firefox.

Explication

Le plus souvent, en ajoutant min -height : 0 pour plier les éléments dans un conteneur dans le sens des colonnes résout le problème. Cependant, dans ce cas, le défi réside dans flex-basis.

La règle abrégée flex : 1 se décompose en trois parties : flex-grow : 1, flex-shrink : 1 et flex-basis : 0. . Par défaut, flex-basis est défini sur 0, ce qui est insuffisant pour déclencher une condition de débordement dans les navigateurs Firefox et Edge.

Pour respecter la standardisation, donnez à flex-basis une hauteur fixe (même si c'est juste . 1px). Cela permet à un débordement de se produire, générant des barres de défilement et empêchant le div enfant de dépasser la taille du parent.

Voici les ajustements de code :

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

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

L'adoption de cette solution vous aidera à surmonter le écart de hauteur entre les divs flexbox parent et enfant dans Firefox, garantissant un comportement cohérent entre les navigateurs.

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!