Flexbox column-reverse in Firefox, Edge and IE

Question

I'm trying to make a responsive app; on larger screens, there's a list of divs and you can scroll up to see previous divs ("traditional" behavior). On smaller screens, it shows the same list but reverses the order, so scrolling down sees shows divs.

I figured flexbox would be an awesome solution to this, and it was... on Chrome.

Here's the 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> 

And, the 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; } 

As well as a fiddle to show it: http://jsfiddle.net/jbkmy4dc/3/

In Chrome, the list div properly shows a scroll bar. However, in Firefox and in IE/Edge, the scroll bar is visible but disabled.

Any ideas? Am I missing a vendor prefix maybe?

Answer 1

This is a bug in Firefox, Edge and IE11.

With flex-direction: column-reverse the scroll bar appears only in Chrome.

If you switch to column the scroll bar works on all browsers.

More information:

• Bug 1042151 - flex-direction: column-reverse (or "flex-direction:column; justify-content:flex-end") with overflow-y: auto is not scrollable

• Philip Walton / flexbugs - Column-reverse and overflow-y not scrollable