我有点被困在构建聊天gpt类用户界面的聊天容器上了.棘手的部分是，我希望消息从头开始，新消息将旧消息进一步推向顶部.该页面如下所示:
标题/页眉 一些文本 |聊天区，拉伸整个可用高度 | | | |第一条消息 |第二条消息 |第三条消息 输入字段 其他一些文本和按钮
页面高度始终为flex-direction: column%，并且没有滚动条.只有聊天是应该显示滚动条时，需要.该页面目前被包装在一个包含flex-direction: column个内存的弹性容器中.
Approach I个
通过使用两个嵌套的div，我已经完成了让聊天区域按预期工作的结束.
#outer {
margin-top: 40px;
border: 1px;
solid lightgray;
border-radius: 16px;
height: 50vmin;
display: flex;
align-items: end;
flex-grow: 1;
overflow: auto;
}
#inner {
max-height: 100%;
}<div id="outer">
<div id="inner">
<messageOne />
<messageTwo />
<messageThree />
</div>
</div>我用这种方法遇到的问题是，无论我做什么，滚动条总是存在的.看起来其中一个容器比另一个高几个像素，因此滚动条始终可见.
Approach II个
使用这种方法时，当聊天区域被消息填满时，它们开始溢出容器，并出现水平滚动条.我找不到办法使容器不溢出来.
#container {
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: end;
}<div id="container">
<messageOne />
<messageTwo />
<messageThree />
</div>PS:我发现，容器上只有display: block个几乎就能达到预期的效果.在这种情况下，唯一缺少的是让消息自下而上地开始.我try 了绝对位置和许多其他东西，但不能很好地工作.