Html 画布超出了网格布局

我正在尝试创建一个包含3个内容列的网格布局和一个包含画布的

.overlay

div

以下是我正在努力解决的问题：

我希望网格始终是屏幕的100%，所以我设置了这个

.container {
  height: 100vh;
  width: 100vw;
}

问题是，在我扩展窗口大小，然后再次减小窗口大小后，画布会继续占据它原来的空间（而不是100vw x 100vh）。我还注意到画布的

宽度

和

高度

与它所占的实际大小不一致

---

我不知道发生了什么，如果您能帮助我设置此布局，我将不胜感激。

请尝试在

画布上设置
位置：绝对位置
，以将其从文档流中删除。
谢谢，它非常有效，至少目前是这样：D