Flex div does not show overflow scrollbars

Question

I have a simple flex container with standard divs in it. The problem is that it never shows a scroller for overflow. I would like it to scroll vertically. I am just typing more words so I can submit this question.

#chatBody {
  height: 170px;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 0;
}

<div id="chatBody">
  <div class="chat-msg">
    <div class="chat-msg-room"></div>
    <div class="chat-msg-user"></div>
    <div class="chat-msg-text">Disconnected from chat</div>
  </div>
  <div class="chat-msg">
    <div class="chat-msg-room"></div>
    <div class="chat-msg-user"></div>
    <div class="chat-msg-text">Disconnected from chat</div>
  </div>
  <div class="chat-msg">
    <div class="chat-msg-room"></div>
    <div class="chat-msg-user"></div>
    <div class="chat-msg-text">Disconnected from chat</div>
  </div>
  <div class="chat-msg">
    <div class="chat-msg-room"></div>
    <div class="chat-msg-user"></div>
    <div class="chat-msg-text">Disconnected from chat</div>
  </div>
  <div class="chat-msg">
    <div class="chat-msg-room"></div>
    <div class="chat-msg-user"></div>
    <div class="chat-msg-text">Disconnected from chat</div>
  </div>
  <div class="chat-msg">
    <div class="chat-msg-room"></div>
    <div class="chat-msg-user"></div>
    <div class="chat-msg-text">Disconnected from chat</div>
  </div>
  <div class="chat-msg">
    <div class="chat-msg-room"></div>
    <div class="chat-msg-user"></div>
    <div class="chat-msg-text">Disconnected from chat</div>
  </div>
  <div class="chat-msg">
    <div class="chat-msg-room"></div>
    <div class="chat-msg-user"></div>
    <div class="chat-msg-text">Disconnected from chat</div>
  </div>
</div>

Possible duplicate of [Use justify-content: flex-end and to have vertical scrollbar](https://stackoverflow.com/questions/36130760/use-justify-content-flex-end-and-to-have-vertical-scrollbar) — Arup Rakshit, Aug 12 '18 at 19:54
`justify-content` is the culprit in your case. Try removing it. — Dhaval Jardosh, Aug 12 '18 at 22:00

Max · Accepted Answer · 2018-08-12T19:49:36.290

#chatBody {
    height: 80px;
    position:relative;
    overflow-y:scroll;
    display: flex;
    min-height: 0;
    flex-direction: column-reverse; /* 'column' for start, 'column-reverse'       for end */
}

<div id="chatBody">
<div class="chat-msg">
    <div class="chat-msg-room"></div>
    <div class="chat-msg-user"></div>
    <div class="chat-msg-text">Disconnected from chat</div>
</div>
<div class="chat-msg">
    <div class="chat-msg-room"></div>
    <div class="chat-msg-user"></div>
    <div class="chat-msg-text">Disconnected from chat</div>
</div><div class="chat-msg">
    <div class="chat-msg-room"></div>
    <div class="chat-msg-user"></div>
    <div class="chat-msg-text">Disconnected from chat</div>
</div>
<div class="chat-msg">
    <div class="chat-msg-room"></div>
    <div class="chat-msg-user"></div>
    <div class="chat-msg-text">Disconnected from chat</div>
</div>
<div class="chat-msg">
    <div class="chat-msg-room"></div>
    <div class="chat-msg-user"></div>
    <div class="chat-msg-text">Disconnected from chat</div>
</div>
<div class="chat-msg">
    <div class="chat-msg-room"></div>
    <div class="chat-msg-user"></div>
    <div class="chat-msg-text">Disconnected from chat</div>
</div>
<div class="chat-msg">
    <div class="chat-msg-room"></div>
    <div class="chat-msg-user"></div>
    <div class="chat-msg-text">Disconnected from chat</div>
</div>
<div class="chat-msg">
    <div class="chat-msg-room"></div>
    <div class="chat-msg-user"></div>
    <div class="chat-msg-text">Disconnected from chat</div>
</div>
</div>

I used flex-direction column-reverse instead of justify-content because justify-content prevents overflow from working. Let me know if this helped.

Looks like you are following [this](https://stackoverflow.com/a/36776769/2767755) answer. If you think that answer is correct mark it as duplicate here by linking it — Arup Rakshit, Aug 12 '18 at 19:56
@ArupRakshit Max answered my question and solved the issue, and it will help other people. I wish StackOverflow was less about marking duplicates and more about solving and answering questions. — jozenbasin, Aug 12 '18 at 22:13
You should check with firefox, mine(latest /w7) do not allow scrolling :( (column:okay/column-reverse:bug) — G-Cyrillus, Aug 12 '18 at 22:21
@jozenbasin What max answered is mentioned in the linked SO answer. He took the answer as a reference... When we see any question is already answered, we link it for future readers only. If you take the time, and have a look at the answer you would figure this out. Max took the answer from SO post without even changing a single word. I don;t know why he puts so much effort when it is there already. — Arup Rakshit, Aug 13 '18 at 09:27
@ArupRakshit What are you talking about? My answer took me no time at all, I had already known of this issue. I am just trying to help out Jozenbasin — Max, Aug 13 '18 at 19:23

G-Cyrillus · Answer 2 · 2018-08-12T22:02:54.633

To avoid(not cure) the bug of the scroll being inactive with column-reverse you should use an extra flex(or not) container wrapping it.

Once you used column-reverse the last element will be shown first at top and the scrollbar will be working where needed on the parent wrapper.

To finally get that last element visually at the bottom , you can mirror the whole container via scale() and mirror again each children so it is readable again .

NOTE: scrolling will be reversed ,scrolling the wheel down will be scrolling up at screen... it is mirrored.

demo below

#chatBody {
  height: auto;/* reset */
  width: auto;/* reset */
  flex: 1;
  display: flex;
  flex-flow: column-reverse;/* reset preparing instead justify-content flex-end */
  transform: scale(1, 1);/* reset, children 1 after 1 will be set back to readable */
  counter-reset:div;/* demo purpose */
}
.chat-msg:before {
counter-increment:div;
content:counter(div)' - ';
float:left;color:red;
}
div[id] {
  overflow: auto;
  border: solid;
  height: 170px;
  flex-flow: column;
}

div[id],
.chat-msg {
  transform: scale(1, -1);/* visual mirroring */
}

.chat-msg {
  border-top: solid;
}

<div id>
  <div id="chatBody">
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user">last</div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
  </div>
</div>

If you do not want to mirror the container, this answer uses a javascript so the scroll is already all the way to the bottom and there is no need to involve the flex model.

@jozenbasin you are welcome, i'm surprised cause his snippet does not scroll with my firefox ? did i misunderstand the question ? edit: Max's answer does work with chrome, not FF :( — G-Cyrillus, Aug 12 '18 at 22:52

Flex div does not show overflow scrollbars

2 Answers2