vue中overflow:scroll引起页面闪烁问题

问题复现：

代码结构如下，最外层container设置了纵向滚动条，但是当list的数据较多，渲染内容超过一屏时，加载数据完成后，会页面闪烁，然后过段时间再正常显示。

<template>
    <div class="container" align="center">
        <div v-for="(item,i) in list" class="list-item d-flex" align="left">
            <div>xxxx</div>
            <div>xxxxxxx</div>
        </div>
    </div>
</template>
<style scoped>
.container{
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: scroll;
  .list-item{
    width: 80%;
  }
 }
 </style>

经过研究，是最外层滚动条导致，解决方案如下：

取消最外层滚动条，在container下再包裹一层，在这一层设置滚动条，既满足滚动需要，又不会导致闪烁。

<template>
    <div class="container" align="center">
        <div class="containerDiv">
            <div v-for="(item,i) in list" class="list-item d-flex" align="left">
                <div>xxxx</div>
                <div>xxxxxxx</div>
            </div>
        </div>
    </div>
</template>
<style scoped>
.container{
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  .containerDiv{
      height: calc(100vh - 3.5vw) !important;
        overflow-y: scroll
  }
  .list-item{
    width: 80%;
  }
 }
 </style>