How to make canvas width and height fit the parent element in Vuetify?

Question

I still new in vue and vuetify, I wan to make <canvas> element to fit its parent element. Below is the App.vue file

<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>

and the result is like the image below

as you can see, the height is not fit the parent element, which make the page scrollable.

What make me more confuse, if i use tag="div" to make it a <div> tag, the width and height just like what i want.

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

below is the page with "div" tag

how to make the canvas fit? Is there something i doing wrong or miss?

here is the Codepen link https://codepen.io/janucaria/pen/pYvGQb

thank you in advance for your help.