[IE/Edge][Firefox] Column-reverse and overflow-y not scrollable

[TranquilMarmot]

This is a known issue in Firefox, see Bug 1042151 - flex-direction: column-reverse (or "flex-direction:column; justify-content:flex-end") with overflow-y: auto is not scrollable

When setting the height of a container and giving it flex-direction: column-reverse, filling it with items, and then setting overflow-y: scroll, a scrollbar appears in Chrome (and Safari, I believe?) but not in IE/Edge and Firefox.

Here's some 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 some 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 demonstrating the behavior: http://jsfiddle.net/jbkmy4dc/3/

Note that using flex-direction: column instead of flex-direction: column-reverse on list shows the scrollbar.

As for a workaround, I guess for now just don't use flex-direction: column-reverse with overflow-y: srcoll

[TranquilMarmot]

So I did manage to find a workaround for this one. Wrapping the list in another div and setting the outer div to flex-direction: column; and then the inner div to flex-direction: column-reverse makes this work fine in Firefox and IE/Edge

HTML:

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

CSS:

#list {
  display: flex;
  flex-direction: column;
  height: 250px;
  overflow-y: scroll;
  border: 1px solid black;
}

#inner {
  display: flex;
  flex-direction: column-reverse;
  flex-grow: 1;
}

.item {
  flex: 1;
  padding: 2em;
  border: 1px dashed green;
}

And, an updated fiddle:
http://jsfiddle.net/jbkmy4dc/7/

[ryanmclaughlin]

@TranquilMarmot This fix seems to break in Chrome/Safari then :/

[TranquilMarmot]

Wow, so it does... and the bug still exists in Firefox (can't test in Edge right now...)

[kumarharsh]

The original fiddle doesn't work in Edge.
The workaround fiddle does work in Edge.

One thing to be noted for the original fiddle in Chrome is that the scrollbar starts at the bottom instead of the top, which is smart or buggy depending on how you look at it.

[kumarharsh]

This fiddle works across all browsers (not tested on Safari)

http://jsfiddle.net/5tk2j2h4/

You don't need the extra display: flex on the #list

CSS

#list {
  height: 250px;
  overflow-y: scroll;
  border: 1px solid black;
}

#inner {
  display: flex;
  flex-direction: column-reverse;
  flex-grow: 1;
}

.item {
  flex: 1;
  padding: 2em;
  border: 1px dashed green;
}

[ryanmclaughlin]

One thing to be noted for the original fiddle in Chrome is that the scrollbar starts at the bottom instead of the top, which is smart or buggy depending on how you look at it.

We're attempting to use this for a chat interface which works well in that it starts at the bottom, but I think you're right here and it's appearing to be much more buggy for me (certain padding is disregarded, disabling iOS CSS transitions/animations oddly enough).

[ryanmclaughlin]

Here's an example where you can see padding-top is not being respected: http://codepen.io/ryanmclaughlin/pen/cad31489bf2dcc4d2b03a88fdd649ecf/

Also, if you view this on an iOS device, you won't see anything. Animations and transitions are not working with flex-direction: column-reverse. If you change this to flex-direction: column everything works as expected. And there's something with -webkit-overflow-scrolling: touch not playing nice with column-reverse.

[philipwalton]

Sorry for not getting to this for a while.

Just skimming over the discussion it sounds like this fix may not actually work. Is that correct? I'm going to close this, but someone can feel free to reopen or start a new issue if a more reliable fix is found.

[dgcoffman]

It sounds like this fix may not actually work. Is that correct?

There is no fix for this browser bug, affecting at least Firefox and Safari.

Workarounds suggested here may allow scrolling the occur, but in doing so fundamentally change the way the inner container grows and shrinks, the way scrollTop is calculated, and the way scroll position works when content is inserted or removed.

The CSS WG accepted a proposal to amend the spec to match Chrome's behavior... two years ago
https://lists.w3.org/Archives/Public/www-style/2014Sep/0187.html

Example 2 of the spec here describes the expected behavior: https://drafts.csswg.org/css-align/#overflow-scroll-position

Chrome is the only major browser that correctly implements this.

[Birowsky]

I was gonna implement a chat view using column-reverse scrolled view, and it was gonna be beautiful. I know because it works in Chrome. But then I hit the no-scroll issue and now I'm just pissed.

If you could reopen this, that'd be great.

[akashpandey1007]

I encountered the problem as well but the above solution would have caused me more work. It seems the problem with flex and firefox is that if we do not give a fixed height to the elements inside flex (in my case list items ) then scroll does not appear. So if you can specify a height (remember height: auto won't work) the scroll will appear

[JLNNN]

Like @Birowsky, I was working on a chat bot, too and now I'm getting this issue :/

[akashpandey1007]

@JLNNN, I found a get around for the problem. Use flex-direction as column and then do margin-top as auto. You will get the same effect as column -reverse.

[wildfireheart]

@akashpandey1007 No, you did not, at least not a complete one. When you load content dynamically (i. e. AJAX), column-reverse will automatically scroll to the bottom, while flex-direction:column; margin-top:auto will not.

[akashpandey1007]

@wildfireheart if we are trying to render multiple chats and we want to scroll down to the bottom on getting the data. We can make a function to slide down to the bottom that is easy. I got a way around it by using the function.
P.S I haven't seen scroll going to the bottom on using column-reverse.

[wildfireheart]

@akashpandey1007 It does work like that on Safari, Opera and Chrome (and Firefox, but no scroll), which imo should be correct behaviour. I'm using it for displaying multiple logs, where messages arrive multiple times a second, so "scrolling down on new data" is not an option. I need it to be scrolled down by default (when first data arrive) and then be scrollable by user. In addition I use it on MCU, where every byte is precious, so I don't want to litter it with JS if I don't have to.

[Birowsky]

@wildfireheart did you figure something with firefox, or are you just ignoring it?

[wildfireheart]

@Birowsky For now I'm just ignoring it, if I find something out and there is no solution yet, I'll post it here.

[Birowsky]

@wildfireheart kudos. In meantime, @philipwalton, if you could reopen this..

[kumarharsh]

I'd like to point you to a comment from earlier in the thread: #108 (comment)

We're attempting to use this for a chat interface which works well in that it starts at the bottom, but I think you're right here and it's appearing to be much more buggy for me (certain padding is disregarded, disabling iOS CSS transitions/animations oddly enough).

So, apparently there are bugs even in Chrome's/Safari's own implementation - I'd recommend you hold off on using this property - it might be considered buggy by the Chrome team (not likely, but it's a grey area nonetheless).

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)

[akashpandey1007]

@wildfireheart when i was working on the same it has a issue with safari a small bug I am not sure why it was but it was removed when i used the flex-direction: column instead, so i think it might be related. Yeah i get your point about extra JS too but as of now there is like no solution to it.

[wildfireheart]

@kumarharsh I'm using it for block of plain text with white-space: pre-line for new lines, so it's fine for me. I'll maybe add some styling to it later, so thanks for mentioning this, I'm now aware to check it everywhere before deployment.

@akashpandey1007 I'm using this with just plain text content and it works fine for me everywhere except Firefox (and maybe Edge, I hadn't test it). It probably has problems, when there are other elements with styling in content, but if you need it for something simple, it may work:

<div id="log" style="
    white-space: pre-line; 
    height: 17em; 
    overflow: scroll;
    display: flex; 
    flex-direction: column-reverse; 
">
    content
</div>

[kumarharsh]

@wildfireheart I've made a rough fiddle to test out how the same behaviour can be implemented using transforms: http://jsfiddle.net/RedDevil/0z5t6j9m/11/

[wildfireheart]

@kumarharsh It does not respect scroll orientation (i.e. natural scrolling). Can that be fixed somehow to be cross-compatible?

[kumarharsh]

There are ways to do it, but none which don't require JS. I also found a small bug in Edge where the scrollbar doesn't render sometimes (but scrolling itself is not affected).

So I guess the whole exercise is in vain :-( Atleast this solution works counter-intuitively in a cross-browser way 😂

[raimondlume]

I was gonna implement a chat view using column-reverse scrolled view, and it was gonna be beautiful. I know because it works in Chrome. But then I hit the no-scroll issue and now I'm just pissed.

If you could reopen this, that'd be great.

And the bug is still yet to be fixed in 2019 - consider reopening!

[akashpandey2193]

@raimondlume you can still achieve the same effect use flex-direction: column with the height: 100% of the div you were using flex-direction: column-reverse with margin-top: auto property. It will work just fine.

div { display: flex; flex-direction: column;(instead of column-reverse) margin-top: auto; height: 100%; }

I think it will help you to attain the same visual effect you want. I suffered from the same issue man. This is the walk around I found.

[diegovinie]

So I did manage to find a workaround for this one. Wrapping the list in another div and setting the outer div to flex-direction: column; and then the inner div to flex-direction: column-reverse makes this work fine in Firefox and IE/Edge

HTML:

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

CSS:

#list {
  display: flex;
  flex-direction: column;
  height: 250px;
  overflow-y: scroll;
  border: 1px solid black;
}

#inner {
  display: flex;
  flex-direction: column-reverse;
  flex-grow: 1;
}

.item {
  flex: 1;
  padding: 2em;
  border: 1px dashed green;
}

And, an updated fiddle:
http://jsfiddle.net/jbkmy4dc/7/

So I did manage to find a workaround for this one. Wrapping the list in another div and setting the outer div to flex-direction: column; and then the inner div to flex-direction: column-reverse makes this work fine in Firefox and IE/Edge

HTML:

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

CSS:

#list {
  display: flex;
  flex-direction: column;
  height: 250px;
  overflow-y: scroll;
  border: 1px solid black;
}

#inner {
  display: flex;
  flex-direction: column-reverse;
  flex-grow: 1;
}

.item {
  flex: 1;
  padding: 2em;
  border: 1px dashed green;
}

And, an updated fiddle:
http://jsfiddle.net/jbkmy4dc/7/

This did work for me, thanks.

[albertoramires]

@diegovinie I think a lot of people that want this fixed are using it to implement chat containers which require the scroll to "start" at the bottom of the container, your updated fiddle starts at the top.

@philipwalton Can you reopen this? It's still an issue.

[tacryt-socryp]

This is still an issue.

[corysimmons]

Issue open since 2015. This is never going to get fixed. Firefox and Safari have ruined CSS. Safari on purpose because web apps can't go into their App Store so why make a browser that can render web apps? Firefox because Mozilla doesn't have Google money.

Abandon your false gods and just throw hacky JS at it until it kinda works. 🤪

[spacewaffle]

I figured out a way to implement it without too much fuss, and it's still responsive but doesn't rely on flexbox. This uses transform: rotate(180deg); to get the items flowing correctly, then direction: ltr; to get the scrollbar in the right position but still have children text left aligned. My use case is a horizontal scroll box so this might not work right for chat boxes.

#list {
  height: 250px;
  overflow-y: scroll;
  border: 1px solid black;
  transform:rotate(180deg);
  direction: rtl;
}

.item {
  transform:rotate(180deg);
  padding: 2em;
  border: 1px dashed green;
  direction: ltr;
}

Proof here:
http://jsfiddle.net/f12jk84v/

[corysimmons]

@spacewaffle Clever but scroll direction is reversed (when I scroll to go up, I go down, and vice versa). Could probably catch that with some simple JS and reverse scroll manually.

[PodgeHn]

flex-direction is now marked as partial support for firefox on mdn docs and on caniuse.com due to this issue.

[yaaooo]

Like many of you, I've struggled with this for quite a bit at work. As @albertoramires rightly points out, a very common use case for this is scrollable chat containers.

I've written an article that touches on this topic and I've put together a number of workarounds to make flex-direction: column behave in a way that's similar to flex-direction: column-reverse. Some key challenges include:

• Flushing the scroll view to the bottom
• "Manually" anchoring the scroll view when DOM elements are prepended
• Handling reflows when prepended image elements are loaded

Feel free to check out the results in this sandbox.

[corysimmons]

@superburrito Amazing write-up. Thank you for sharing your research.

[Loydtafireyi]

This fiddle works across all browsers (not tested on Safari)

http://jsfiddle.net/5tk2j2h4/

You don't need the extra display: flex on the #list

CSS

#list {
  height: 250px;
  overflow-y: scroll;
  border: 1px solid black;
}

#inner {
  display: flex;
  flex-direction: column-reverse;
  flex-grow: 1;
}

.item {
  flex: 1;
  padding: 2em;
  border: 1px dashed green;
}

working well on all browers

[p-syche]

This issue is still occuring, still in the same context as described above. Please reopen this.

[rhryhorenko]

@philipwalton, the issue still persists. Please, reopen the issue.

[garrettw]

As per his last reply, there needs to be a fully working fix in order to reopen this. It has little to do with whether the problem still exists or not. If someone can verify that one of the fixes mentioned above works reliably (or has a better fix to contribute), then please do.

[Ashoat]

It looks like Firefox has finally fixed this bug! The fix will be shipped in the upcoming Firefox 81.

[Ramya-Bronson]

Finally, in 2020.. some good news... the issue seems to be fixed.