如何将子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而上升，为此，我在可滚动的父div中执行了flex-direction: column-reverse，这在浏览器Opera和Chrome，但禁用Firefox和Edge中的滚动

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