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

Since this firefox-bug is still in place: note that under the second link provided in the answer by Michael_B, kumarharsh gives two css-only "whacky workaround[s]" that have the scroll-down behaviour as in chrome. From kumarharsh's post on philipwalton list of flexbugs:

Till then, here's some whacky workaround with 2 transforms: http://jsfiddle.net/RedDevil/qar7Lc5s/ (rotate transforms) or http://jsfiddle.net/RedDevil/0z5t6j9m/ (scale transforms - better IMO)

Disadvantages: the solutions use transform and in firefox the content loses sharpness when scrolling. Also the scrolling behaviour is upside down, or the scrollbar on the wrong side.

Answer 2

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

Answer 3

As a workaround, you can distribute the styles of your container among two different containers:

• The outer one with the sizes, borders and overflow
• The inner one with the flexbox styles

If you want it to be scrolled to the bottom by default, you can use JS: Scroll to bottom of div?

function scrollToBottom(el) { el.scrollTop = el.scrollHeight; }
scrollToBottom(document.getElementById('list'));

#list {
  height: 250px;
  overflow-y: scroll;
  border: 1px solid black;
}
#inner-list {
  display: flex;
  flex-direction: column-reverse;
}
.item {
  flex: 1;
  padding: 2em;
  border: 1px dashed green;
}

<div id="list">
  <div id="inner-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>
</div>