Javascript 聊天时Div没有溢出

我正在尝试创建聊天，但是在一些消息之后，新消息没有出现在屏幕上，我想溢出，用户可以向下滚动消息，但是只有一些消息出现，在这些消息出现之后，什么也没有发生，只是以静态方式显示以前的消息，我正在使用React和Socket.io。 代码：

const[messagesAndAuthors，setMessagesAndAuthors]=useState（[]）；
useffect（（）=>{
socket.on（'receivedMessage'，（newMessage:{}）=>{
messagesAndAuthors（[…messagesAndAuthors，newMessage]）
});
})
函数发送消息（e:FormEvent）{
e、 预防默认值（）；
if（message.trim（））{
const messageObject={
用户名，
消息
室友
};
emit（'sendMessage'，messageObject）；
}
setMessage（“”）；
}
----------------------------后端（SOCKET.IO）：
socketInfo.on（'sendMessage'，（数据：任意）=>{
socketInfo.broadcast.emit（'receivedMessage'，data）；
});
.chat容器{
保证金：0.5雷姆；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
字体：400 1rem‘硫点’；
背景色：#254441；
填充：2rem0；
边界半径：2em；
证明内容：之间的空间；
文本对齐：居中；
最大高度：77.5vh；
溢出：自动；
}
.chat容器h1{
背景色：#ff6f59；
填充：0.2rem 4rem；
边界半径：2em；
文本对齐：居中；
对齐项目：居中；
证明内容：中心；
边缘底部：1rem；
}
.邮件容器{
文本对齐：开始；
背景色：#254441；
边界半径：2em；
身高：90%；
边缘底部：0.5雷姆；
溢出：自动；
}
.我的风格{
宽度：15雷姆；
边界：透明；
边界半径：1.5雷姆；
边缘顶端：2rem；
文字装饰：无；
文本对齐：开始；
列表样式：无；
字体：700 1.4rem“硫点”；
填充：0.2rem 0.6rem；
保证金：1rem 0；
}
.我的风格李{
左边距：1 em；
}
.信息我的风格李+李{
字体：4001.4rem‘硫点’；
}
.聊天室容器输入{
背景色：#ff6f59；
填充：1rem4rem；
边界半径：2em；
文本对齐：居中；
字体：700 1.2rem‘硫点’；
大纲：无；
边界：透明；
}
.chat容器输入：：占位符{
颜色：#254441；
}

聊天
{messages和authors.map（（messagewithauthor:any）=>{
返回(

{messagewithauthor.author}:
{messagewithauthor.message}

)        
})}
{setMessage（e.target.value）}type=“text”placeholder=“Digite sua mensage”/
下面是一个例子。您需要修改它以使其适合您，但它应该作为一个良好的起点


函数updateScroll（）{
让el=document.getElementsByClassName（“聊天”）[0]；
让偏移量=el.scrollHeight-el.scrollTop；
如果（偏移量<120）el.scrollTop=el.scrollHeight；
}
var messageNumber=1；
函数addMessage（）{
let msg=“
”>新信息“+messageNumber++”
”；
document.getElementsByClassName（“聊天信息”）[0].innerHTML+=（msg）；
updateScroll（）；
}
设置间隔（addMessage，2000）；
addMessage（）
。聊天{
宽度：250px；
高度：100px；
溢出：自动；
背景色：暗灰色；
边框：纯黑1px；
边界半径：2px；
}
.聊天信息{
列表样式类型：无；
}
.聊天信息{
填充：0px；
左侧填充：5px；
边际：0px；
}



OP没有使用jQuery，而是使用react。这一点很好。我将使用纯JS。因为我不知道如何反应，我相信OP可以相应地修改它。