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?

4 Answers 4

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:

2
  • 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 ;) Dec 13, 2015 at 19:28
  • 1
    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, 2022 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>

3
  • in chrome I see only 3 2 1 and no scrollbar
    – rofrol
    Feb 15, 2016 at 11:33
  • 3
    @rofrol Chrome needed flex-shrink: 0 on #inner. I have updated the answer, thanks.
    – Oriol
    Feb 15, 2016 at 16:15
  • 1
    @rofol Or even better, there was no need to make the outer container a flex container.
    – Oriol
    Feb 16, 2016 at 13:28
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)

2
  • 7 years on, I face this issue. Any update on this?
    – Ramya
    May 18, 2021 at 19:05
  • I believe this is fixed in > Firefox 81
    – Podge
    Jun 8, 2021 at 10:43
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.

1
  • Is there a possibility, to make scroll behavior not to be upside down with this solution? May 6, 2020 at 6:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.