I have a problem with flexbox and flex-direction. I'm creating a web chat application, everything works as expected on Chrome, but I have a problem with Firefox, IE and Edge browsers. I have a container:
.chat-box-main {
flex: 1;
width: 100%;
background: #f5f5f5;
display: flex;
flex-direction: column-reverse;
overflow: auto;
scrollbar-width: thin;
}
and it has display:flex; and flex-direction: column-reverse properties. I would like to present messages from bottom, not from top that's why it is set to column-reverse.
Everything is okay on Chrome browser, but on Firefox, there is no scrollbar to scroll content of the chat.
What is interesting, when I change to flex-direction: column; everything is okay, but I don't have content switched upside down. This cause some serious problems with scrolling to bottom etc.
I read that this is a problem with Mozilla Firefox, and it is considered as a bug, but is there anyone who found a workaround for this problem? Thank you.
