Как добавить текст снизу блока?

Question

[Galdar Turin]

Кто шарит в этих flex(ах) как сделать добавление текста внизу блока, как во всех мессенджерах?
https://jsfiddle.net/hj381wLt/1/
В данный момент когда пишешь текст и отправляешь, его кидает в самый верх...

Требуется чтобы блок "скролился" - т.е. можно было просмотреть все прошлые сообщения + чтобы они отображались и добавлялись снизу вверх.
У меня получалось сделать что-то одно из... Либо добавляется внизу, либо скролится...

Answer 1

[Galdar Turin]

Вот решение, но не работает это в mozilla

#chat {
  padding-bottom: 10px;
  height: 100%;
  font-size: 20px;
  font-weight: normal;
  display: flex;
  flex-direction: column; 
  justify-content: flex-end;
}
.chat-main {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column-reverse;
}

Может кто знает как заставить работать и в mozilla

Answer 2

[Анита Ковалева]

display: flex;
flex-direction: column;    ------- у вас column-reverse; 7 строка

Comments

[Galdar Turin]

Анита Ковалева, а вот тут возникает проблема, при большом количестве сообщений они перестают "скролиться", если использовать ваш вариант, из-за этого я и в тупике. Либо блок "скролиться" либо блок добавляется в самый конец