HTML5微小的底部页面被剪掉

我正在创造一款HTML5/Javascript游戏，其中布局需要始终处于绝对位置。这意味着，当我要调整窗口的大小时，内容应该缩放，而不是溢出，所以没有滚动条，这允许我滚动内容。

因此，我使用flexbox，其中外部div容器被拉伸到窗口宽度和高度大小(100%)。它几乎工作，但仍然有一个非常小的溢出在底部。

这是一个关于JSfiddle demo和demo全屏的演示。奇怪的是，这种剪辑只有在结果全屏显示时才会出现。然后，一个垂直滚动条也出现了。它也会出现在火狐、Chrome和Safari等常用浏览器上。

它只在垂直方向发生，水平方向也可以。

我的问题是，我怎样才能避免这种情况?

html, body {
    margin: 0;
    height: 100vh;
    overflow: hidden;
}
#game {
    position: absolute;
    background-color: #940020;
    border-color: #5c51d4;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

#opRow, #gameRow, #playerRow {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: forestgreen;
    border-style: solid;
    border-radius: 20px;
}  
#myCanvas {
    width: 100%;
    height: 100%;
}
#opRow {
    height: 15%;
}
#gameRow {
    height: 40%;
}
#playerRow {
    height: 45%;
}
#playerCard1, #playerCard2, #playerCard3, #playerCard4, #playerCard5 {
    max-width: 90%;
    height: 90%;
    margin: 1vh;
    border-style: dashed;
    border-color: #555555;
    border-radius: 15px;
}
#opCard1, #opCard2, #opCard3, #opCard4, #opCard5 {
    height: 90%;
    margin: 1vh;
    border-style: dashed;
    border-color: #555555;
    border-radius: 15px;
    margin: 2vh;
}
#playerCard, #opCard {
    height: 90%;
    margin: 1vh;
    border-style: dashed;
    border-color: #555555;
    border-radius: 15px;
}
#adout, #cards {
    height: 90%;
    margin: 1vh;
    border-style: dashed;
    border-color: #555555;
    border-radius: 15px;
}
#cards {
    height: 90%;
    margin: 1vh;
}
#gameRow25, #gameRow75 {
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#gameRow75 {
    width: 75%;
}
#gameRow25 {
    width: 25%;
}