Creating a scrollable v-overlay with a fixed close button

I am likely abusing what v-overlays are for. I have a CodePen at https://codepen.io/james-hudson3010/pen/MWyjNvj which illustrates what I am trying to achieve. What I want to use an overlay for is to provide a printable view of some app content, applying d-print-none as required. As this content will be taller than the viewport, the overlay needs to be scrollable. I also wanted the close button to be fixed to the top, left corner of the viewport.

At the moment, nothing is working as I want it to. What isn't working is:

1. The first Item text I see is 488, not 1. I cannot scroll up.

2. The close button does not appear. Checking the element out in the debug tools tells me that display: fixed is an invalid property value.

3. When scrolling down, eventually, the Show Overlay button reappears.

Javascript:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    overlay: false
  }),
})

CSS:

.hide-button {
  display: fixed;
  top: 16px;
  left: 16px;
}

HTML:

<div id="app">
  <v-app id="inspire">
    <v-btn text @click="overlay = !overlay">Show Overlay</v-btn>
    
    <v-overlay opacity="1" light color="white" :value="overlay" style="overflow: scroll">
      <v-btn class="hide-button" color="primary" @click="overlay = false">
            Hide Overlay
      </v-btn>
      <div v-for="x in 1000" style="color: black">Item {{x}}<br></div>
    </v-overlay>
  </v-app>
</div>