Vue - 让水平滚动条(scroll bar)固定在浏览器的底部

在几个小时的google和stack overflow的苦苦搜索后，无果。
经过自我思考，想到了一种实现方法：
整个页面是一个盒子，要出现滚动条，必然里面的元素要溢出。也即是，元素水平overflow，那么就出现水平滚动条。元素垂直overflow，那么会出现垂直滚动条。
我原先是讲眼光放在局部的小盒子(如下图)，无论我怎么调整display或者overflow，当这个局部的元素溢出的时候，滚动条是根据这个局部生成的。

那么我如果要把水平滚动条出现的时候固定在底部，我就要把眼光放在整个大盒子（全局）。

    .board-container {         display: flex;         overflow: visible;(默认)         // 如果overflow: scroll或者auto 会失效。     }

    export default {         name: 'DefaultLayout',         components: {             MyHeader,         },         mounted: function () {             this.$nextTick(function () {                 var div = document.querySelector('.main-container');                 div.style.height = window.innerHeight + 'px';                 console.log('mounted: ', div);                 console.log('mounted: ', window.innerHeight);             })         },     };

ͼʾ

main-container是整个页面
board-container是卡片那块区域