Jquery 使文本列表保持在页脚上方，但能够在合成栏下方滚动

我正在尝试滚动一个消息列表，使其位于合成栏的下方，但当添加新消息时，它们应该添加到合成栏的正上方。要快速演示我的意思，请参见本文中的图片

我的问题：

• 我无法根据内容大小控制内部div元素的宽度

• 无法正确获取所需的滚动条（如图中所示）

.contentContainer{
保证金：0；
填充：0；
边缘顶部：68px；
高度：计算（100vh-68px）；
显示：块；
溢出y：自动；
}
.内容{
显示器：flex；
弯曲方向：行；
柔性包装：nowrap；
身高：继承；
}
.messageArea{
柔性生长：1；
/*最小宽度：400px*/
身高：继承；
位置：相对位置；
}
.scrollingMessagesList{
身高：继承；
溢出x：隐藏；
溢出y：自动；
变换：translateZ（0）；
}
.外部{
保证金：0自动；
边缘顶部：18px；
边缘底部：142px；
高度：414px；
位置：相对位置；
背景色：#78909c；
}
.内部{
利润率：0.20px；
身高：继承；
背景色：黑色；
显示器：flex；
弯曲方向：柱反向；
对齐项目：柔性端；
}
.内普{
宽度：自动；
最大宽度：100%；
大纲：无；
垫底：2件；
背景颜色：绿黄色；
}
康波塞巴先生{
z指数：1029！重要；
边界：无；
底部：20px；
}
.创作{
高度：52px；
边界半径：26px；
背景色：白色；
盒影：0 1px 5px 0 rgba（0,0,0,16），0 4px 4px 0 rgba（0,0,0,10），0 3px 3px 0 rgba（0,0,0,08）；
;
}

文本1

文本2

文本3

在这里，您可以检查我是否更新了您的代码，如果有帮助，请查看

$（文档）.ready（函数（）{
函数setHeight（）{
windowHeight=$（window.outerHeight（）；
$（'.inner'）.css（'min-height'，windowHeight-68）；
};
设置高度（）；
$（窗口）。调整大小（函数（）{
设置高度（）；
});
});
.contentContainer{
保证金：0；
填充：0；
显示：块；
溢出y：自动；
边缘顶部：68px；
高度：calc（100vh-68px）；
}
.内容{
显示器：flex；
弯曲方向：行；
柔性包装：nowrap；
身高：继承；
}
.messageArea{
柔性生长：1；
/*最小宽度：400px*/
身高：继承；
位置：相对位置；
}
.scrollingMessagesList{
身高：继承；
溢出x：隐藏；
溢出y：自动；
变换：translateZ（0）；
}
.外部{
保证金：0自动；
位置：相对位置；
背景色：#78909c；
}
.内部{
利润率：0.20px；
高度：自动；
背景色：黑色；
显示器：flex；
弯曲方向：立柱；
证明内容：柔性端；
填充底部：60px；
对齐项目：柔性端；
}
.内部p{
宽度：自动；
最大宽度：100%；
大纲：无；
垫底：2件；
背景颜色：绿黄色；
}
康波塞巴先生{
z指数：1029！重要；
边界：无；
底部：5px！重要；
位置：固定；
}
.创作{
高度：52px；
边界半径：26px；
背景色：白色；
盒影：0 1px 5px 0 rgba（0,0,0,16），0 4px 4px 0 rgba（0,0,0,10），0 3px 3px 0 rgba（0,0,0,08）；
}

文本1

文本2

文本3

文本4

文本5

文本6

文本7

文本7

看看我的答案：@LGSon，我不知道如何实现它。虽然我更新了代码，现在使用flex-direction:reverse，但我的线程顺序是相反的。例如：文本1和文本2显示为文本2和文本1。我看到您获得了帮助：）@LGSon，我也可以使用您的一些帮助，如果您不介意，如果没有元素，那么div将被压缩，然后？在进一步的测试中，我发现如果内部div中没有元素，并且突然添加了一个新元素，那么该元素将显示在内部div的顶部，而它应该在合成栏上方几个像素。我已经更新了代码，请看一看。问题是，当页面加载时，如果列表很长，列表将位于合成栏下方。请看一下我问题中的图片。Hello@ayan我想我们需要使用jquery来确定内部div的最小高度，以防出现长对话，它会自动增加。你是怎么想的。但是，当会话增加时，溢出将向底部增加，从而扩展compose div下面的消息列表，这也不是我想要的。溢出应该朝向顶部，这样只有当我滚动列表时，列表才能在vieport高度上自由上下移动。你怎么认为？