前端聊天室滚动到底部设置scrollTop无效？

最近改造一个移动端类似聊天室的留言板项目，将PHP的项目改为NODE，走的是HTTP协议没有使用socket协议。需求是：发送完消息后需要滚动页面最底部。但是无论我怎么设置dom元素的scrollTop它就是不动，最后在同事一眼就看出来是因为这个dom元素的高度没有固定，故而在此总结一下。

css:

.flow {
  position: relative;
  padding-top: 50px;
  overflow-y: auto;
  box-sizing: border-box;
  padding-bottom: 57px;
  -webkit-overflow-scrolling: touch;
  height: 98vh; // 很重要，之前写的是min-height
}

js:

// 自动滚动到页面底部
this.$flow = document.querySelector('.flow'); // 获取需要滚动元素
this.$nextTick(() => {
    this.$flow.scrollTop = this.$flow.scrollHeight;
})

还需要监听滚动到页面顶部加载更多历史消息：

// 监听对应dom 的scroll事件
watchScroll () {
    let  _this = this
    this.$nextTick(() => {
        setTimeout(() => {
        	//这里要看情况，不能对window添加scroll监听事件，否则无法生效
            _this.$flow.addEventListener('scroll', _this.handleScroll, true);  // 监听（绑定）滚轮滚动事件
        }, 1000)
    });
},


// 滚动到顶部加载更多
handleScroll () {
    if (this.$flow.scrollTop === 0 && this.allowScrollTop) { // 表明已经滚到最上面
        this.isInLoadMore = true;
        this.ajaxGetChatMsgList(this.chatMsgList[0].id)
    }
},