Pourquoi « flex-direction : column-reverse » provoque-t-il des problèmes de défilement dans Firefox, Edge et IE ?

Problème de défilement de Flexbox column-reverse dans Firefox, Edge et IE

Lors de la tentative de création d'une application réactive contenant une liste de divs affiché avec un défilement vers le haut sur les écrans plus grands et un défilement vers le bas avec un ordre inversé sur les écrans plus petits, l'utilisation de la propriété flexbox 'column-reverse' semblait être une solution idéale. Cependant, cela a entraîné un problème particulier dans les navigateurs autres que Chrome.

Structure HTML et style CSS

Le code HTML consistait en un div « liste » contenant une série de « élément » divs. Le CSS a attribué « display: flex » et « flex-direction: column-reverse » au div « list », garantissant que les éléments étaient empilés verticalement et inversés. Une propriété de hauteur et de « débordement-y » permettait le défilement vertical, et des bordures ont été ajoutées pour plus de clarté visuelle.

Comportement de défilement entre navigateurs

Dans Chrome, la « liste » ' div affichait une barre de défilement fonctionnelle, permettant aux utilisateurs de faire défiler vers le haut pour afficher les éléments précédents. Cependant, dans Firefox, Edge et IE11, la barre de défilement est apparue mais est restée désactivée, empêchant le défilement.

Explication du bug

L'enquête a révélé que ce comportement est un bug dans Firefox , Edge et IE11. Lors de l'utilisation de 'flex-direction: column-reverse' et 'overflow-y: auto', la barre de défilement est absente.

Solution

Si la propriété 'column' est utilisé à la place de « colonne inversée », la barre de défilement devient fonctionnelle dans tous les navigateurs. La propriété 'justify-content: flex-end' est également nécessaire pour aligner les éléments en bas de la div 'list' pour un défilement correct vers le bas.

Informations supplémentaires

Plus de détails sur ce problème peuvent être trouvés dans les ressources suivantes :

• Bogue 1042151 - flex-direction: column-reverse (ou "flex-direction:column; justifier-content:flex-end ") avec overflow-y : auto ne défile pas
• Philip Walton / flexbugs - Column-reverse et overflow-y ne défilent pas

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!