Adjusting a fluid container in a Vuetify layout

I am using Vuetify as the front end framework for a VueJS application I am developing, however I am having an issue adjusting the fluid container that holds the main content to underlay the footer. When the content expands past the height of the page, the footer overlays the content. How can I adjust the main content container so that it takes the height of the footer into consideration when displaying the table content?

<div id="app">
  <v-app id="inspire">
                <v-app-bar color="primary white--text" light app clipped-left clipped-right fixed>
            <v-toolbar-title class="ml-0 pl-3">
              <v-app-bar-nav-icon @click.stop="navMenu = !navMenu" color="white"></v-app-bar-nav-icon>
              <span class="hidden-sm-and-down">Memory Infuser</span>
            </v-toolbar-title>

            <v-spacer></v-spacer>
          </v-app-bar>
    
          <v-main>
            <v-container fluid class="pt-0">
                <v-row class="pr-2 pl-2">
                        <v-col cols="12">
                    <v-data-table
                      :headers="headers"
                      :items="desserts"
                      :items-per-page="20"
                      class="elevation-1"
                    ></v-data-table>  
                  </v-col>
                </v-row>
            </v-container>
          </v-main>
    
          <v-footer app light color="primary white--text">
                <v-card tile flat class="text-center" color="primary" width="100%">
                    <v-card-text class="white--text">
                              Footer Text
                    </v-card-text>
                </v-card>
          </v-footer>
  </v-app>
</div>

https://codepen.io/deftonez4me/pen/WNoyrGY