Окно чата, в котором новые сообщения отображаются внизу, а старые сообщения выдвигаются вверх. ⇐ CSS

[Anonymous]

Я как бы застрял в создании контейнера чата для пользовательского интерфейса, похожего на gpt. Сложная часть заключается в том, что я хочу, чтобы сообщения начинались снизу, а новые сообщения продвигали старые вверх. Страница выглядит следующим образом:

заголовок/заголовок какой-то текст | область чата, растянувшаяся на всю доступную высоту | | | | первое сообщение | второе сообщение | третье сообщение поле ввода другой текст и кнопки

Страница всегда имеет 100% высоту и не имеет полосы прокрутки. Только чат должен отображать полосу прокрутки при необходимости. В настоящее время страница заключена в гибкий контейнер с flex-direction: columns.

Подход I

Что мне удалось сделать так, чтобы область чата работала должным образом, так это наличие двух вложенных элементов div.

#outer { маржа сверху: 40 пикселей; граница: 1 пиксель; сплошной светло-серый; радиус границы: 16 пикселей; высота: 50вмин; дисплей: гибкий; выровнять-элементы: конец; гибкий рост: 1; переполнение: авто; } #внутренний { максимальная высота: 100%;

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

Подход II

При таком подходе, когда область чата заполняется сообщениями, они начинают переполнять контейнер и появляется горизонтальная полоса прокрутки. Я не нашел способа предотвратить переполнение контейнера.

#container { дисплей: гибкий; гибкое направление: столбец; гибкий рост: 1; оправдание-содержание: конец;

PS: Я обнаружил, что простое использование display:block в контейнере работает почти так, как ожидалось. Единственное, чего в этом случае не хватает, так это того, чтобы сообщения начинались снизу вверх. Экспериментировал с абсолютным положением и множеством других вещей, но так и не смог заставить это работать.