Pourquoi mes Divs de défilement Flexbox s'affichent-ils différemment dans Firefox et Chrome, et comment puis-je y remédier ?

Problèmes de rendu multi-navigateurs avec Flexbox dans Firefox et Chrome

Le modèle de mise en page flexbox fournit un moyen intuitif et efficace de gérer le positionnement des éléments et dimensionnement. Cependant, des incohérences dans le comportement de rendu entre les navigateurs peuvent survenir.

Problème : défilement incorrect dans .Scroll Div

Dans les versions antérieures de Chrome (47), les éléments avec l'extension . la classe de défilement défilait correctement en utilisant flex, occupant 100 % de hauteur. Cependant, dans Firefox, la même classe a amené le div à utiliser uniquement la hauteur du contenu, ce qui a entraîné un comportement de défilement incorrect.

Solution multi-navigateurs

Pour résoudre ce problème , la taille minimale par défaut des éléments flexibles doit être remplacée. En définissant min-width et min-height sur 0, le div .scroll peut être réduit pour s'adapter à son contenu tout en conservant une barre de défilement :

.content {
    min-height: 0;
    min-width: 0;
}

Comportement de rendu mis à jour dans Chrome 48

Il est important de noter que Chrome 48 a adopté un comportement de rendu similaire à celui de Firefox. Par conséquent, la solution fournie ci-dessus devrait désormais fonctionner de manière cohérente sur les deux navigateurs.

Informations supplémentaires

Le changement dans Chrome 48 a été mis en œuvre pour s'aligner sur la dernière spécification flexbox, qui la largeur minimale et la hauteur minimale sont définies par défaut sur auto. Cela permet des tailles minimales plus raisonnables pour les éléments flexibles.

Pour plus de détails, reportez-vous aux spécifications et aux rapports de bogues liés dans la réponse référencée.

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!