如何使用CSS隐藏元素溢出？

Question

我正在尝试使用javascript，css和html制作一个非常简单的聊天框的前端。

当用户调整窗口大小时，我遇到元素溢出问题，如果聊天超过12条消息，则消息会从容器中溢出。

我做了一个jsfiddle所以你们可以自己尝试：https://jsfiddle.net/fb72uwwq/6/

在小提琴中，单击聊天按钮和垃圾邮件，调整浏览器大小，您可以看到它们溢出。

我尝试了一些堆栈溢出答案，但overflow: hidden;无法正常工作。我该如何解决这个问题？

Answer 1

将高度设置为100％可以解决问题。

c.style.height = "100%";

Answer 2

的CSS

#chat{
  height: 100% !important;
  overflow-y: hidden; 
   /* if you want to scroll on overflow, you can use overflow-y: scroll; or overflow-y: auto; */
}

Answer 3

overflow: hidden将无效，因为您根本没有将消息放入容器中。相反，您将它们与绝对定位堆叠起来并计算底部边距作为其兄弟。使用您当前的标记，除非您还想手动计算，否则无法在顶部切断消息。

此外，您的问题不是很明确：您是否想要在容器外部添加消息时停止添加消息，或者您只想将它​​们从屏幕上裁剪掉（但它们仍然可以在DOM中显示）。

无论哪种方式，如果您通过以下方式创建当前结构， 可以改进

<div id=chat>
  <input type=text id=chat-message>
  <div class=message>First message</div>
  <div class=message>Second message</div>
  <div class=message>Third message</div>
</div>

通过这种方式，您只需要使它们显示为您希望它使用Flexbox：

#chat {
  display: flex;
  flex-direction: column-reverse; /* from bottom to top */
}

您的JavaScript也会更简单，因为您只是创建一个新元素作为#chat的最后一个子元素，这意味着无需额外的计算。 （您仍然可以在屏幕上显示一定数量的消息后删除最旧的消息。）