Flexbox overflow-y scroll in Firefox

Question

For a chat application, I want to have a scroll-able message list. It works in Chrome / Chromium, but not in Firefox. The problem seems related to flexbug #1 and has been asked & addressed often enough here on SO. However, despite trying min-height:0 on all parents as suggested here and elsewhere, the problem remains.

One quick fix is to remove display:flex from .bot-message-list. But doing so results in messages starting to appear on top of the list, instead of at the bottom as is intended.

So the question is: what can I change in order to make the message list scroll-able on all browsers while having the initial messages starting to populate at the bottom of the list.

Codepen of the current state

Any pointers are very much appreciated!

Nebojsa Jevdjovic · Accepted Answer · 2020-07-07 11:04:26Z

1

You can try add height on element ".message-list-inner".

.message-list-inner {
     height: 100vh; /* or height: 100%;*/
}

For a brief look it seems to work.

answered Jul 7, 2020 at 11:04

Nebojsa Jevdjovic

1415 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Flexbox overflow-y scroll in Firefox

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related