css - 如何将子 div 与可滚动父 div 的底部对齐

Question

我正在开发一个聊天系统，我有一个可滚动parent的 div 和一个child包含以下消息的 div：

#parent {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    display: flex;
    flex-direction: column-reverse; /*This works fine in Opera and Chrome, but not in Firefox and Edge*/
}

#child {
    width: 90%;
    margin: 0 auto;
}

正如您在图像中看到的，我需要子 div 从底部开始并随着消息 div 添加而上升，为此我flex-direction: column-reverse在可滚动的父 div 中执行此操作，这在浏览器 Opera 和 Chrome 中运行良好，但禁用滚动火狐和边缘

我的问题是，当在带有滚动的 div 中使用 flex 时，在 Firefox 和 Edge 中自动滚动停止工作

标签： cssscrollflexbox