Html CSS:position:sticky child不在父对象中工作，属性：flex direction:column reverse；

最佳社区

我有一个聊天应用程序，其中的消息是在一个家长持有css道具：灵活的方向：列反向； 这样，父div总是滚动到底部

然而，我想把日期贴在上面，当它们经过时，但这似乎不适用于弹性方向：列反转；属性，是否有人知道如何使用此方法（我不喜欢使用javascript jquery示例：（$（“.messages”）.scrollTop（$（“.messages”）[0].scrollHeight）；）以滚动到div的底部，而是查看css中的解决方案

不反转属性列的工作示例：

。消息
{
高度：200px；
溢出：自动；
显示器：flex；
弯曲方向：立柱；
}
.留言，留言
{
显示器：flex；
利润率：10px；
填充：10px；
最小高度：最大含量；
对齐项目：柔性端；
单词包装：打断单词；
背景：#eee；
}
.messages.message.me
{
证明内容：柔性端；
}
.messages.date设备{
文本对齐：居中；
利润率：10px；
填充：10px；
框大小：边框框；
背景：FF9800；
颜色：#ffffff；
字体大小：12px；
字号：900；
位置：粘性；
边界半径：2px；
顶部：0px；
z索引：2；

第一条信息
第二条消息
3st消息
2019年1月15日（贴在顶部）
第4条消息
第五条消息
第六条消息
第7条消息
第8条消息
2019年1月15日（直列，直到卷轴到达顶部）
第9条消息