Html Flexbox布局和滚动条问题

这是我聊天室的目标：

但是，问题是溢出后不会创建滚动条

这是没有弹性的：

这是在应用Flex以将消息对齐到底部之后，但不允许我滚动：

let chatText=document.getElementById（'chat-text'）；
让chatterxt2=document.getElementById（'chat-text-with-flex'）；
让chatInput=document.getElementById（'chat-input'）；
让chatForm=document.getElementById（'chat-form'）；
chatForm.onsubmit=（e）=>{
e、 预防默认值（）；
chatText.innerHTML+=''+chatInput.value+''；
chatText2.innerHTML+=''+chatInput.value+''；
}

#聊天背景{
位置：相对位置；
身高：100%；
宽度：519px；
高度：141px；
溢出：自动；
}
#聊天文本{
位置：绝对位置；
利润率最高：5；
左：10；
边框：实心1px黑色；
背景色：红色；
高度：112px；
宽度：502px；
溢出y：自动；
颜色：黑色；
}
#使用flex聊天文本{
位置：绝对位置；
利润率最高：5；
左：10；
边框：实心1px黑色；
背景色：红色；
高度：112px；
宽度：502px；
溢出y：自动；
颜色：黑色；
显示器：flex；
弯曲方向：立柱；
证明内容：柔性端；
}
#聊天文本div，#带有flex div的聊天文本{
颜色：白色；
边框：实心1px黑色；
背景颜色：蓝色；
单词包装：打断单词；
宽度：482；
}

正常聊天框，溢出后滚动条工作
正常聊天框，滚动条工作
正常聊天框，滚动条工作
带有flex的聊天框（将消息与底部对齐），但没有滚动条（问题）
带有flex的聊天框（将消息与底部对齐），但没有滚动条（问题）
带有flex的聊天框（将消息与底部对齐），但没有滚动条（问题）
带有flex的聊天框（将消息与底部对齐），但没有滚动条（问题）

您需要

最小高度

属性使其工作

let chatterxt2=document.getElementById（“带flex的聊天文本”）；
让chatInput=document.getElementById（“聊天输入”）；
让chatForm=document.getElementById（“聊天表单”）；
chatForm.onsubmit=（e）=>{
e、 预防默认值（）；
chatText2.innerHTML+=“”+chatInput.value+“”；
$（“#聊天背景”）.scrollTop（$（“#聊天背景”）[0]。scrollHeight）；
};
#聊天背景{
位置：相对位置；
身高：100%；
宽度：519px；
高度：141px；
溢出：自动；
}
#使用flex聊天文本{
利润率最高：5；
左：10；
边框：实心1px黑色；
背景色：红色；
宽度：502px；
高度：自动；
溢出：滚动；
颜色：黑色；
显示器：flex；
弯曲方向：立柱；
证明内容：柔性端；
}
#聊天文本分区，
#使用flex-div聊天文本{
颜色：白色；
边框：实心1px黑色；
背景颜色：蓝色；
单词包装：打断单词；
宽度：482；
}

问题解决了1
问题已解决2
问题已经解决了
问题已经解决了
问题已经解决了
问题是，您必须滚动查看新消息，而我的目标是“自下而上”chatbox@Dan将我的scoll代码编辑到底。使用jQuery