24

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?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
TranquilMarmot
  • 2,034
  • 2
  • 19
  • 25

4 Answers4

20

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:

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • Oh cool, looks like the working group has accepted a definition that will fix this... I guess I'll keep using it for now and hope that vendors can agree on some functionality ;) – TranquilMarmot Dec 13 '15 at 19:28
  • 2
    This bug was fixed in FF 81 released on September 2020. Edge is now based on Chromium so it's also working there. – Pedro Jan 22 '22 at 15:24
16

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>
Community
  • 1
  • 1
Oriol
  • 274,082
  • 63
  • 437
  • 513
2

This is a known bug in firefox and is logged in bugzilla.
Please vote up this bug.

They are considering fixing it this years(only 6 years after bug was opened)

Podge
  • 236
  • 1
  • 4
  • 11
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.

davide
  • 11
  • 3