Pourquoi « flex-direction : column-reverse » désactive-t-il le défilement dans Firefox, Edge et IE ?

Problème d'inversion des colonnes Flexbox dans Firefox, Edge et IE

Lors de la création d'applications réactives, il est courant d'utiliser Flexbox pour afficher du contenu. Dans certains scénarios, vous souhaiterez peut-être inverser l'ordre des éléments lorsque la taille de l'écran change. Bien que cela fonctionne parfaitement dans Chrome, un problème déroutant survient dans Firefox, Edge et Internet Explorer.

Le problème devient évident lors de l'utilisation de flex-direction: column-reverse pour inverser l'ordre des éléments. Dans Chrome, la barre de défilement se comporte comme prévu, permettant aux utilisateurs de faire défiler vers le haut pour afficher les éléments précédents. Cependant, dans les navigateurs concernés, la barre de défilement apparaît mais reste désactivée.

Pour illustrer ce problème, examinons le code suivant :

<code class="css">#list {
  display: flex;
  flex-direction: column-reverse;
  height: 250px;
  overflow-y: scroll;
  border: 1px solid black;
}

.item {
  flex: 1;
  padding: 2em;
  border: 1px dashed green;
}</code>

Lors de l'utilisation de ce code, vous remarquerez le problème susmentionné dans Firefox, Edge et IE.

Cause première et résolution

Ce problème provient d'un bug présent dans les navigateurs concernés. Plus précisément, lorsque vous utilisez flex-direction: column-reverse et overflow-y: auto, la barre de défilement ne fonctionne pas comme prévu.

Comme solution de contournement, vous pouvez utiliser column au lieu de flex-direction: column-reverse . Cette approche permettra d'obtenir le même effet visuel et garantira que la barre de défilement fonctionne correctement dans tous les navigateurs pris en charge.

Informations supplémentaires

Pour plus de détails et d'informations sur ce problème, reportez-vous aux ressources suivantes :

• [Flexbugs - Column-reverse et overflow-y not scrollable](https://github.com/philipwalton/flexbugs/issues/104)
• [Bogue 1042151 - flex-direction : column-reverse (ou "flex-direction:column; justifier-content:flex-end") avec overflow-y : auto ne peut pas défiler](https://bugzilla.mozilla.org/ show_bug.cgi?id=1042151)

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!