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

Comportement inversé des colonnes Flexbox dans différents navigateurs

Flexbox offre un système de mise en page puissant, mais des incohérences surviennent lors de la mise en œuvre de certaines propriétés dans les navigateurs. L'un de ces problèmes concerne le comportement de la propriété flex-direction: column-reverse dans Firefox, Edge et IE.

Le problème

Considérez le HTML et le CSS suivants code :

<code class="html"><div id="list">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div></code>

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

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

Comportement attendu

Lorsque ce code est affiché dans Chrome, il crée une liste verticale d'éléments qui peuvent faire défiler vers le haut pour afficher entrées précédentes.

Comportement inattendu

Cependant, dans Firefox, Edge et IE/Edge, la barre de défilement apparaît désactivée.

Raison

Ce comportement provient d'un bug dans les navigateurs précités. Lorsque flex-direction: column-reverse est utilisé, la barre de défilement n'est fonctionnelle que dans Chrome. Si vous remplacez column-reverse par simplement column, la barre de défilement fonctionnera dans tous les navigateurs.

Informations supplémentaires

Pour plus de détails sur ce bug, reportez-vous à ce qui suit ressources :

• Bogue 1042151 - https://bugzilla.mozilla.org/show_bug.cgi?id=1042151
• Philip Walton / flexbugs - Colonne inversée et débordement non autorisé défilable https://github.com/philipwalton/flexbugs/issues/618

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!