Pourquoi les éléments My Flexbox s'affichent-ils de manière incohérente dans Firefox et Chrome 48 ?

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

Contexte

A La récente mise à jour de la spécification flexbox a introduit une modification de la taille minimale par défaut des éléments flexibles afin qu'elle corresponde à la taille du contenu. Alors que Chrome 47 a correctement implémenté ce changement, Chrome 48 et Firefox ont présenté des problèmes avec le rendu des éléments flexbox.

Problème

Dans Firefox, certains éléments flexbox avec un contenu débordant se comporter de manière inattendue. Alors que Chrome 47 a rendu ces éléments correctement, Chrome 48 correspond désormais au comportement de Firefox.

Solution

Pour résoudre ce problème, vous pouvez explicitement remplacer la taille minimale par défaut de ces éléments en utilisant les propriétés CSS suivantes :

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

Cela garantit que les éléments flexbox peuvent correctement se réduire pour s'adapter à leur contenu, résolvant ainsi les problèmes de rendu.

Détails de la spécification

La spécification flexbox indique :

"Pour fournir une taille minimale par défaut plus raisonnable pour les éléments flexibles, cette spécification introduit une nouvelle valeur automatique comme valeur initiale des propriétés min-width et min-height. défini dans CSS 2.1."

Impact sur Chrome 48

Selon les observations, la mise en œuvre initiale de la mise à jour flexbox dans Chrome 48 émulait le comportement de Firefox, provoquant des problèmes de rendu similaires . Cependant, des rapports ultérieurs indiquent que Chrome 48 a mis à jour son comportement de rendu pour correspondre à la solution fournie ci-dessus.

Conclusion

En définissant explicitement la taille minimale des éléments flexibles sur 0 dans les deux sens, vous pouvez résoudre efficacement les problèmes de rendu rencontrés dans Firefox et Chrome 48 lors de la gestion du contenu débordant.

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!