Pourquoi ma barre de défilement Flexbox ne fonctionne-t-elle pas avec « colonne inversée » dans Firefox, Edge et IE ?

Problèmes de barre de défilement Flexbox avec « colonne inversée » dans Firefox, Edge et IE

Dans la recherche d'un design réactif, un développeur a rencontré une bizarrerie inattendue lors de l'utilisation de flexbox pour inverser l'ordre des éléments sur des écrans plus petits. Alors que l'approche fonctionnait parfaitement dans Chrome, la barre de défilement est restée désactivée dans Firefox, Edge et IE.

En examinant le HTML et le CSS, il devient clair que flexbox avec flex-direction: column-reverse est bien le coupable. Cependant, après enquête, ce comportement est en fait un bug connu dans les navigateurs mentionnés.

Il s'avère que lors de l'utilisation de flex-direction: column-reverse, la barre de défilement n'apparaît que dans Chrome. Si le développeur passe à la colonne flex-direction:, la barre de défilement devient fonctionnelle dans tous les navigateurs.

Pour des informations plus détaillées, les ressources suivantes fournissent un aperçu du problème :

• [Bug 1042151 - flex-direction : column-reverse (ou "flex-direction:column; justifier-content:flex-end") avec overflow-y : auto ne défile pas](https://bugzilla.mozilla.org/show_bug. cgi?id=1042151)
• [Philip Walton / flexbugs - Colonne inversée et débordement non défilables](https://github.com/philipwalton/flexbugs/issues/399)

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!