Pourquoi mes éléments Flexbox défilent-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

Dans Firefox et Chrome 48, le rendu flexbox diffère, entraînant un problème avec contenu défilant. Dans Chrome 47, les éléments de classe .scroll défilent correctement et occupent 100 % de la hauteur de leur conteneur. Cependant, dans Firefox, ces éléments adhèrent à la hauteur de leur contenu et ne défilent pas correctement.

Solution

Ce problème multi-navigateurs découle d'une mise à jour de la spécification flexbox qui définit la taille minimale par défaut des éléments flexibles sur la taille de leur contenu (min-width : auto / min-height : auto). Pour corriger cela, vous pouvez remplacer ce paramètre avec le CSS suivant :

.content {
    min-height: 0;           /* NEW */
    min-width: 0;            /* NEW */
}

En définissant à la fois min-height et min-width sur 0, vous forcez les éléments à rétrécir leur contenu, leur permettant ainsi de faire défiler correctement leur conteneur.

Développements récents

Il convient de noter que Chrome 48 a depuis mis à jour son comportement de rendu pour émuler celui de Firefox. En conséquence, la solution fournie ci-dessus devrait désormais fonctionner à la fois dans Firefox et Chrome 48.

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!