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

Question

我希望我的vuetify应用程序内容（而不是导航或工具栏）能够水平和垂直滚动以显示一个大网格（非常类似于iframe或框架集）： https://cawoodm.github.io/powowshell/ide/

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

• 内容区域（黄色）应使用屏幕上所有剩余的宽度和高度（最大高度：100％不能正常工作，我认为应该如此）
• 用户应该能够滚动（黄色）内容区域（请参见粉红色滚动条）以显示整个网格

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

我整理了一个codepen来说明问题，但最终我希望对上面链接的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;
}