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

Question

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

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

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

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

我尝试了一些堆栈溢出答案，但 overflow: hidden; 没有用。我该如何解决这个问题？

Answer 1

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; */
}