如何在 Vuetify 中使应用程序内容可滚动？

Question

我希望我的 vuetify 应用程序内容（不是导航或工具栏）可以水平和垂直滚动以显示大网格（很像 iframe 或框架集）：https : //cawoodm.github.io/powowshell/ide/

主网格相当大（9x9 200px 方块 + 填充），要求是：

• 内容区域（黄色）应使用屏幕的所有剩余宽度和高度（最大高度：100% 不像我认为的那样工作）
• 用户应该能够滚动该（黄色）内容区域（见粉色滚动条）以显示整个网格

问题是我只在我的窗口的整个高度上得到一个垂直滚动条（我不想要），当我将它滚动到底部时，我得到了我的水平滚动条（尽管是灰色的）。

我已经破解了一个代码笔，它显示了问题，但最终我希望对上面链接的 URL 演示进行更正。

HTML

    <v-content >
        <v-layout fill-height fill-width>
          <div id="scroll">
            <div id="grid">81 200x200px blocks go here...
            </div>
          </div>
        </v-layout>
    </v-content>

CSS

#scroll {
    max-width: 100%;
    width: 100%;
    max-height: 100%;
    height: 100%;
    overflow: scroll;
    background-color: yellow;
    padding: 10px;
}
#grid {
    width: 2000px;
    height: 2000px;
    background-color: grey;
}