HTML / CSS: Создание чата. В окне чата не отображается полоса прокрутки, когда увеличивающийся вверх контейнер пузыря чата вызывает переполнение

Question

Извините за расплывчатое название, мой словарь sh на английском языке довольно ограничен.

Я пытаюсь создать чат для своего веб-сайта (работает как Facebook Messenger). У меня есть:

Окно чата:

.chatbox {
   width:500px;
   height:500px;
   max-height:500px;
   display: block;
   overflow: auto;
   overflow-y: overlap;
   position: relative;
}

Контейнер пузыря чата:

.chat-bubble-container {
   width: 100%;
   height: auto;
   position: absolute;
   bottom: 0;
   left: 0;
}

И пузыри чата (это просто тег "p", не является частью проблемы, поэтому я не помещал его код здесь).

В HTML окно чата выглядит так:

<!-- The chatbox -->

<div class="chatbox">

   <!-- The chat bubble container is wrapped inside the chatbox -->

   <div class="chat-bubble-container">

      <!-- Chat bubble will be created and put in here, I have already done that part -->

   </div>

</div>

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

• Когда всплывающее окно чата высота контейнера превышает высоту окна чата, это вызывает переполнение.

• Но вместо отображения полосы прокрутки содержимое внутри окна чата просто обрезается.

Итак, как мне решить эту проблему?

Answer 1

Где обрыв при прокрутке - это position: absolute; bottom: 0; на chat-bubble-container. Если вы удалите нижнее требование, появятся полосы прокрутки.

В качестве альтернативы вы можете рассмотреть возможность добавления фиксированных height и overflow:scroll; к .chat-bubble-container