Grid overflowing with video tag

I have a grid that I'm trying to build that will contain a main video 'stream' area that should shrink/expand with the browser size. The bottom part of the grid I want to have a static height for let's say 64px. The issue that I'm having is that the video tag seems to cause the grid container to overflow on larger monitor sizes while on smaller monitor sizes the bottom 64px static area is not sticking to the bottom of the page.

When the video tag is 'larger' than the container divs size the video tag keeps growing larger and causes overflow. When the container is smaller the video tag shrinks and causes the bottom dive to no longer be on the bottom of the page.

You can see this when scaling the codepen output panel smaller/larger.

Here is some condensed code that demonstrates the issue. (Vue/Vuetify)

Vue

<template>
  <div id="app">
    <v-app style="background: green">
      <v-main>
        <v-container class="pa-0 fill-height" fluid>
          <div style="height: 100%; width: 100%">
            <div class="content-panel">
              <div class="stream">
                <video ref="video-player" :src="videoSrc" controls muted />
              </div>
              <v-card class="stream-controls" flat tile color="purple" height="100%" width="100%">Actions</v-card>
            </div>
          </div>
        </v-container>
      </v-main>
    </v-app>
  </div>
</template>

<script>
export default {
data() {
    return {
      loading: true,
      videoSrc: null
    };
  },
  mounted() {
    this.player = this.$refs["video-player"];
    this.player.addEventListener("canplay", this.canPlayListener);
    this.videoSrc =
      "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4";
  },
  methods: {
    canPlayListener(event) {
      this.loading = false;
      this.player.play();
    }
  }
};
</script>

<style scoped>
html {
  overflow-y: auto !important;
}

.content-panel {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 65px;
  gap: 0px 0px;
  grid-template-areas:
    'stream'
    'stream-controls';
}
.stream {
  grid-area: stream;
  height: 100%;
  width: 100%;
}
.stream-controls {
  grid-area: stream-controls;
  background-color: red;
}
video {
  height: 100%;
  width: 100%;
}
</style>

CodePen