如何使画布的宽度和高度适合Vuetify中的父元素？

Question

我在Vue和Vuetify上还是一个新手，我想使<canvas>元素适合其父元素。下面是App.vue文件

<template>
  <v-app>
    <v-toolbar app flat color="blue lighten-1">
      <v-toolbar-title>
        <span>VUETIFY</span>
      </v-toolbar-title>
    </v-toolbar>
    <v-content>
      <v-container fluid fill-height class="pa-0">
        <v-layout fill-height>
          <v-flex fill-height>
            <v-card tag="canvas"
                    color="black"
                    width="100%"
                    height="100%">
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </v-content>
    <v-footer color="green lighten-1"></v-footer>
  </v-app>
</template>

<script>
export default {
  name: "App"
};
</script>

结果类似于下图

如您所见，高度不适合父元素，这会使页面可滚动。

如果我使用tag="div"使其成为<div>标签，其宽度和高度就跟我想要的一样，这让我更加困惑。

    <v-card tag="div" // <= this tag
            color="black"
            width="100%"
            height="100%">
    </v-card>

下面是带有“ div”标签的页面

如何使画布合适？我做错了什么还是想念吗？

这是Codepen链接 https://codepen.io/janucaria/pen/pYvGQb

预先感谢您的帮助。