html - HTML/CSS：创建一个聊天框。当向上扩展的聊天气泡容器导致溢出时，聊天框不显示滚动条

Question

抱歉标题含糊不清，我的英语词汇量非常有限。

我正在尝试为我的网站制作一个聊天框（有点像 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>

• 添加新的聊天气泡时，它会出现在聊天框的底部，并将旧的聊天气泡向上推，从而使聊天气泡容器向上缩放。

• 当聊天气泡容器的高度超过聊天框的高度时，会导致溢出。

• 但不是让滚动条出现，聊天框内的内容只是被剪裁了。

那么我该如何解决呢？

标签： htmlcss

Answer 1

滚动中断的地方 position: absolute; bottom: 0;是chat-bubble-container. 如果您删除底部要求，滚动条将显示。

或者，您可以考虑添加一个固定的height和overflow:scroll;.chat-bubble-container