Maison > interface Web > tutoriel CSS > le corps du texte

Comment empêcher un élément flexible de dépasser la hauteur du parent et activer la barre de défilement dans Firefox ?

DDD
Libérer: 2024-10-24 18:39:30
original
368 Les gens l'ont consulté

How to Prevent Flex Item from Exceeding Parent Height and Enable Scrollbar in Firefox?

Empêcher les éléments Flex de dépasser la hauteur du parent et activer la barre de défilement dans Firefox

Les conteneurs Flex peuvent être difficiles à gérer, en particulier lorsqu'il s'agit d'éléments enfants qui ont des barres de défilement. Dans Firefox, un div enfant avec une propriété flex: 1 et overflow-y: scroll a tendance à dépasser la hauteur de son conteneur flexbox parent. Ce problème se produit car les navigateurs interprètent différemment le raccourci flex: 1.

Pour résoudre ce problème, remplacez flex: 1 par flex: 1 1 1px. Cette valeur ajustée définit explicitement la base flexible (la largeur ou la hauteur minimale) sur 1 px. Lorsqu'il est utilisé en combinaison avec overflow-y: scroll, il oblige le div enfant à respecter la limite de hauteur du parent et à afficher des barres de défilement si nécessaire.

Voici les ajustements de code spécifiques à effectuer :

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

#messagecontents {
  flex: 1 1 1px; /* new */
}</code>
Copier après la connexion

Avec ces changements en place, le div enfant s'agrandira pour remplir l'espace vertical restant dans le conteneur parent, mais il ne dépassera plus la hauteur du parent. Des barres de défilement apparaîtront lorsque le contenu déborde, permettant aux utilisateurs de faire défiler le contenu verticalement sans que le div enfant ne grandisse indéfiniment.

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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!