为什么不溢出：在bootstrap-vue模态中滚动正常工作？

Question

所以我有以下引导程序模式：

</template>
    <div>
        <b-modal v-model="show_modal">
            <p>blah blah blah blah blah</p>
            <div id="entity-list">
                 <div>item 1</div>
                 <div>item 2</div>
                 <div>item 3</div>
                 <div>item 4</div>
                 <div>item 5</div>
                 <div>item 6</div>
                 <div>item 7</div>
             </div>
        </b-modal>
        <b-button type="button" variant="primary" @click="show_modal= !show_modal">Toggle Modal</b-button>
    </div>
</template>
<script>
export default {
    data: function() {
        return  {
            show_modal: false
        }
    }
</script>
<style lang="scss" scoped>
#entity-list {
    max-height: 250px;
    overflow-y: scroll;
    overflow-x: hidden;
    div {
        height: 40px;
    }
}
</style>

因此由于某种原因，我无法使用鼠标的滚轮滚动，但是如果我尽力了，我可以找到滚动条并使用它来滚动列表。但是鼠标滚轮有问题，只是滚动主窗口而不是实体列表div。

我在Safari中尝试了此代码，并且可以滚动浏览实体列表。这似乎是Chrome特有的错误。有什么办法解决吗？