Как заставить флекс показывать элементы снизу

Question

В обычном окне бота чата или в окне мессенджера, когда вы набираете новое сообщение, оно появляется в нижней части потока истории чата, а все остальное в списке увеличивается - так что пользователь всегда может увидеть последнеесообщение. И когда история чата становится длиннее, само окно чата не увеличивается бесконечно - только старые элементы поднимаются выше и визуально исчезают (хотя вы можете прокрутить их обратно).

Я пытался подражатьэто поведение, использующее flex обертку и flex-direction: column-reverse для div "истории чата" внутри, но я не могу понять это.

Вот моя попытка: https://codepen.io/chapkovski/full/gOOKGwJ

Сейчас(a) «история чата» или любой другой контент отображается сверху, и когда вы вводите новый элемент там, окно просто «раскрывает». Любые ссылки или подсказки в нужном направлении приветствуются

Answer 1

Это ваша структура

<section>
   <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
   </ul>
</section>

Все, что вам нужно сделать, это добавить этот css

ul {
    display: flex;
    flex-direction: column-reverse;
}

Это скажет ul элемент, чтобы быть гибким и отобразить ваших детей в столбце(один над другим) и в обратном порядке (внизу пойдет сначала).

Надеюсь, это помогло:)