Pourquoi ma Flexbox défile-t-elle différemment dans Firefox et Chrome 48, et comment puis-je y remédier ?

Résolution des problèmes de rendu avec Flexbox dans Firefox et Chrome 48

Introduction :
Flexbox, une mise en page puissante système, peut entraîner des incohérences entre les navigateurs. Cette question aborde un problème de rendu où flexbox se comporte différemment dans Firefox et Chrome 48.

Problème :
Dans Chrome 47, un div avec la classe .scroll défile correctement, occupant 100 % hauteur en utilisant la flexion. Cependant, dans Firefox, le même div utilise la hauteur du contenu et ne défile pas correctement.

Résolution :
Le changement de comportement de rendu est dû à une mise à jour de la spécification flexbox , qui définit la taille minimale par défaut des éléments flexibles en fonction de la taille de leur contenu. Pour remplacer ce paramètre et garantir la compatibilité entre navigateurs, vous pouvez ajouter les règles CSS suivantes :

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

Cela forcera le div .content, qui contient le div .scroll, à avoir une taille minimale de zéro. , lui permettant de se réduire pour s'adapter à l'espace disponible.

Comportement de Chrome mis à jour :
Initialement, la solution ci-dessus devait fonctionner à la fois dans Firefox et Chrome 48. Cependant, elle a Il a été signalé que Chrome 48 avait mis à jour son comportement de rendu et émulait désormais Firefox en termes de taille flexible minimale. Par conséquent, la solution fournie ci-dessus devrait également résoudre le problème dans 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!