Comment empêcher les enfants Flex de dépasser la taille des parents avec les barres de défilement dans Firefox ?

Empêcher un élément flexible de dépasser la hauteur du parent avec des barres de défilement

Problème : Dans Firefox, un élément enfant flexible avec des barres de défilement dépasse la hauteur de son conteneur flex parent, provoquant un débordement de contenu et l'absence de barres de défilement.

Solution :

Modifier la propriété flex des éléments enfants #messagelist et # le contenu du message est le suivant :

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

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

Explication :

Le comportement par défaut de Chrome est de déclencher un débordement et de générer des barres de défilement lorsque la base flexible est définie sur 0. Firefox et Edge , cependant, nécessitent une hauteur définie ou une hauteur maximale pour que le débordement se produise.

En spécifiant une hauteur fixe de 1 px pour la base flexible, même s'il s'agit d'une petite valeur, cela satisfait à l'exigence de création d'un débordement. condition et permet aux barres de défilement d'apparaître lorsque le contenu dépasse la taille de l'enfant.

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!