Why does `flex-direction: column-reverse` disable the scrollbar in Firefox, Edge, and IE/Edge?

Flexbox column-reverse Behavior in Different Browsers

Flexbox offers a powerful layout system, but inconsistencies arise when implementing certain properties across browsers. One such issue involves the behavior of the flex-direction: column-reverse property in Firefox, Edge, and IE.

The Issue

Consider the following HTML and CSS 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>

Expected Behavior

When this code is displayed in Chrome, it creates a vertical list of items that can be scrolled up to view previous entries.

Unexpected Behavior

However, in Firefox, Edge, and IE/Edge, the scroll bar appears disabled.

Reason

This behavior stems from a bug in the aforementioned browsers. When flex-direction: column-reverse is used, the scroll bar is only functional in Chrome. If you change column-reverse to simply column, the scroll bar will work in all browsers.

Additional Information

For further details on this bug, refer to the following resources:

• Bug 1042151 - https://bugzilla.mozilla.org/show_bug.cgi?id=1042151
• Philip Walton / flexbugs - Column-reverse and overflow-y not scrollable https://github.com/philipwalton/flexbugs/issues/618

The above is the detailed content of Why does `flex-direction: column-reverse` disable the scrollbar in Firefox, Edge, and IE/Edge?. For more information, please follow other related articles on the PHP Chinese website!