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

Question

[Galdar Turin]

Короче вот проблема какая:
Вот есть чат, в поле когда вводишь текст и нажимаешь enter он отправляется вниз блока, но не получается сделать scroll всего блока, если получается то не добавляется сообщение вниз блока и так по кругу, не могу понять что от чего зависит
https://jsfiddle.net/GaldarTurin/hj381wLt/

spoiler

Хочу сделать сделать отображение блоков как в чате, снизу вверх, чтобы каждый последующий блок отображался снизу и при достижении границы можно было пролистать этот блок сролом, получилось сделать добавление снизу через flex но не пролистывает

<div id="a">
        <div id="c">
            <div class="name"><div class="record"></div></div>
        </div>
    </div>

#a{
  overflow-y: hidden;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  background-image: url(/img/background-100X100.jpg);
  background-repeat: repeat;
  height: 100%;
  display: flex;
}
#c {
  font-size: 20px;
  font-family: "Helvetica Neue";
  font-weight: normal;
  display: flex;
  overflow-y: scroll;
  overflow-x: hidden;
  padding-bottom: 10px;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
}

Answer 1

[Brad9aga]

https://jsfiddle.net/cv8da7wg/
не за что
подробнее есть тут
https://stackoverflow.com/questions/36130760/use-j...

Comments

[Galdar Turin]

Brad9aga,
Вот есть чат, в поле когда вводишь текст и нажимаешь enter он отправляется вниз блока, но не получается сделать scroll всего блока, если получается то не добавляется сообщение вниз блока и так по кругу, не могу понять что от чего зависит
https://jsfiddle.net/GaldarTurin/hj381wLt/

[Brad9aga]

Galdar Turin, такое ощущение, что я пример для стенки писал
https://jsfiddle.net/5vgt6qnj/

[Galdar Turin]

Brad9aga, огромное тебе спасибо! Я смотрел твой пример, но применив те жи стиле не заработало, я попытался разобраться и все поплыло... Спасибо еще раз за повторение!

[Galdar Turin]

Brad9aga, только вот единственное при добавлении сообщения он его кидает наверх а не вниз. Это вот о чем я писал, либо лок листается и сообщения вверх добавляются либо добавляются вниз, но не листается блок, а мне нужно и то и то, чтобы сообщения листались и добавлялись в самый низ, короче как во всех мессенджерах

[Brad9aga]

Galdar Turin, эт те надо на js переходить

[Galdar Turin]

Brad9aga,
Вот решение, ток в 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;
}

Answer 2

[FeST1VaL]

Что именно не пролистывает? блок #a? так вы поставили overflow-y: hidden, поставьте scroll и усе)

Comments

[Galdar Turin]

Артем Будин,

Вот есть чат, в поле когда вводишь текст и нажимаешь enter он отправляется вниз блока, но не получается сделать scroll всего блока, если получается то не добавляется сообщение вниз блока и так по кругу, не могу понять что от чего зависит
https://jsfiddle.net/GaldarTurin/hj381wLt/