Чат с новыми сообщениями, отображаемыми внизу и нажимает старые сообщения ⇐ CSS

[Anonymous]

Я немного застрял, создаю контейнер чата с помощью чата, похожий на GPT,. Сложная часть в том, что я хочу, чтобы сообщения начинались снизу с новых сообщений, продвигающих старые дальше к вершине. Страница выглядит следующим образом: < /p>
the teal /Header
немного текста
| Область чата, растягивая всю доступную высоту
|
|
|
| Первое сообщение
| Второе сообщение
| Третье сообщение
Поле ввода
Некоторый другой текст и кнопки < /p>
Страница всегда на 100% высоте и не имеет полосы прокрутки. Только чат должен показывать полосу прокрутки, когда это необходимо. Страница в настоящее время обернута в гибкий контейнер с помощью гибкого направления: столбец .
подход i
Закрытие, когда я работал в области чата, как и ожидалось, с двумя вложенными div. />

Код: Выделить всё

#outer {
margin-top: 40px;
border: 1px;
solid lightgray;
border-radius: 16px;
height: 50vmin;
display: flex;
align-items: end;
flex-grow: 1;
overflow: auto;
}

#inner {
max-height: 100%;
}< /code>






< /code>
< /div>
< /div>
< /p>
Проблема, с которой я сталкиваюсь с этим подходом, заключается в том, что независимо от того, что я делаю, панель прокрутки всегда присутствует. Похоже, что один из контейнеров на пару пикселей выше, чем другой, и, таким образом, стержень прокрутки всегда видна. Я не нашел возможности удержать контейнер от переполнения.#container {
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: end;
}< /code>

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

Подробнее здесь: https://stackoverflow.com/questions/773 ... essages-up