Comment puis-je restaurer le comportement Flexbox de Firefox 33.x dans Firefox 34.x et versions ultérieures ?

Restauration du comportement de Flexbox à partir de Firefox 33.x dans Firefox 34.x et au-delà

Mises à jour récentes de Firefox (dans les versions 34 et 35) ont modifié le comportement par défaut de Flexbox. Si vous comptez beaucoup sur Flexbox pour la mise en page de votre application et que vous remarquez des changements inattendus, cet article vous guidera dans la réplication du comportement trouvé dans Firefox 33.x dans les versions plus récentes.

La principale différence entre Flexbox dans Firefox 33.x et 34.x réside dans l'introduction de « la taille minimale implicite des éléments flexibles ». Cette fonctionnalité, qui a été supprimée puis réajoutée à la spécification Flexbox, alloue une taille minimale aux éléments flexibles, les obligeant à s'étendre au-delà de la fenêtre d'affichage dans certains scénarios.

Pour restaurer le comportement de Firefox 33.x , vous pouvez ajouter la règle de style suivante :

* { min-height: 0; }

Cette règle définit effectivement la hauteur minimale de tous les éléments à 0, permettant à la mise en page flexible de se comporter comme elle le faisait dans Firefox. 33.x.

Vous pouvez également appliquer min-height : 0 uniquement à des éléments spécifiques qui répondent aux critères suivants :

• Enfants d'un conteneur flexible orienté verticalement (colonne).
• Contient un grand descendant qui nécessite un débordement

Dans votre cas particulier, vous êtes probablement vous devez appliquer min-height: 0 dans tous les conteneurs flexibles imbriqués dans votre application, car chaque élément de la hiérarchie peut avoir un descendant de grande taille qui nécessite une gestion des débordements.

Pour des informations supplémentaires et des exemples de contenu affecté par cette Flexbox changement de spécification, veuillez vous référer au rapport de bug Mozilla suivant : https://bugzilla.mozilla.org/show_bug.cgi?id=1043520

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!