Scrolling just one flexbox item while another remains fixed using flex-column

I have a CodePen demonstrating the issue at https://codepen.io/james-hudson3010/pen/dyMyVMg

I am close to what I want...the top most item with the "Toggle List" button remains fixed while the list scrolls. However, when I get to the bottom of the list, the top most item moves up. The top most item should remain fixed.

Checking the height of the flexbox, it is the expected height. i.e. it is the height of the body - height of header - height of footer

I would have thought the height of the flex items would be determined based on the height of the flexbox, but apparently flex items can grow unconstrained...is this true? why?

JS:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  props: {
    source: String,
  },

  data: () => ({
    showList: true
  }),
  
  computed: {
    filtered() {
      var items = [];
      
      for ( var i = 0; i < 15; i++ ) {     
        let newItem = {
          'name': `Item ${i}`,
          'comment': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut'
        }
        
        items.push( newItem );
      }
      
      console.log( items.length, " ]] ", items );
      
      return items;
    },
    
    children() {
      var children = [];
      
      for ( var x = 0; x < 30; x++ ) {
        let newChild = {
          'name': `Item ${x}`
        }
        
        children.push( newChild );
      }
      
      console.log( children.length, " >> ", children );
      
      return children;
    }

  }
      
      
})

HTML:

<div id="app">
  <v-app id="inspire">
    <v-app id="inspire" style="width: 100vw; height: 100vh;">
      <v-app-bar app color="primary">
        <v-btn text icon>
          <v-icon>mdi-arrow-left</v-icon>
        </v-btn>
        <v-btn text icon>
          <v-icon>mdi-arrow-right</v-icon>
        </v-btn>
      </v-app-bar>

      <v-main style="height: 100%; width: 100%;">
        <div class="d-flex flex-column align-stretch" style="height: 100%; width: 100%;">

          <v-card class="pa-3 primary lighten-3" flat>
            <v-btn class="ma-4" @click="showList = !showList">Toggle List</b-btn>
          </v-card>

          <v-card flat color="transparent" height="100%" width="100%" v-if="showList">        
            <v-virtual-scroll :item-height="100" :items="filtered" bench="50">          
              <template v-slot="{ item }">
                <v-list-item>              
                  <v-list-item-content>
                    <v-list-item-title style="background-color: lightgreen;">{{ item.name }}</v-list-item-title>
                    <v-list-item-subtitle class="text-wrap" style="background-color: lightyellow;">
                      {{ item.comment }}
                    </v-list-item-subtitle>
                  </v-list-item-content>         
                </v-list-item>
              </template>         
            </v-virtual-scroll>        
          </v-card>
          <v-card width="100%" max-width="100%" height="100%" tile style="overflow: scroll;" v-else>                        
            <div v-for="item in 50">Hello {{ item }}<br></div>
          </v-card>
        </div>

      </v-main>

      <v-footer app color="primary">
        <v-img alt="Vue logo" height="40" width="40" max-height = "40" max-width = "40" contain />
      </v-footer>
    </v-app>
  </v-app>
</div>