1

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!

citivin
  • 626
  • 1
  • 9
  • 24

1 Answers1

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.

Nebojsa Jevdjovic
  • 106
  • 5