Pourquoi Firefox et Chrome rendent-ils Flexbox différemment et comment puis-je y remédier ?

Disparités de rendu Flexbox dans Firefox et Chrome

Dans le domaine du développement Web, les problèmes de rendu entre navigateurs peuvent poser des défis importants. L'un de ces problèmes rencontrés par les utilisateurs de Flexbox est le comportement incohérent observé dans Firefox et les versions antérieures de Chrome.

Dans Chrome 47, le div ".scroll" fonctionnait comme prévu, utilisant Flexbox pour atteindre une hauteur de 100 %. Cependant, dans Firefox, le même div adhérait à la hauteur du contenu, ce qui entraînait un comportement de défilement inapproprié. Cela a soulevé la question d'une solution multi-navigateurs pour cet écart de rendu.

La modification de la spécification flexbox, qui fixait la taille minimale par défaut des éléments flexibles égale au contenu, a provoqué cette différence de rendu. Pour résoudre ce problème, les développeurs peuvent remplacer cette valeur par défaut en définissant explicitement min-width et min-height sur 0.

**.content {

background: yellow;
flex: 1;
display: flex;
flex-direction: column;

min-height: 0;           /* NEW */
min-width: 0;            /* NEW */

}
**

Cependant, les récentes mises à jour de Chrome ont entraîné un changement de comportement. Chrome 48 émule le rendu précédent de Firefox, ce qui permet à la même solution d'être applicable dans les deux navigateurs.

La valeur automatique initiale pour min-width et min-height, telle que définie dans CSS 2.1, a été remplacée par la nouvelle valeur automatique. valeur, qui définit la taille minimale par rapport à la taille du contenu. Cela a introduit un changement dans le comportement de rendu par défaut des éléments flexbox, entraînant des incohérences observées entre les navigateurs.

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!