Maison > interface Web > tutoriel CSS > Comment empêcher les enfants Flex de dépasser la taille des parents avec les barres de défilement dans Firefox ?

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

Barbara Streisand
Libérer: 2024-10-25 03:03:30
original
336 Les gens l'ont consulté

How to Prevent Flex Children from Exceeding Parent Height with Scrollbars in 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>
Copier après la connexion

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!

source:php
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal