How to allow flex in Vuetify to exclude a header when vertically shrinking a video

问题

I am trying to make a <video> to be constrained to the available area in the browser. This is mostly working -- the video is growing and shrinking both horizontally and vertically as the window is reshaped. However, when the height is less than the natural height of the video, the flex spacing is including the height of a <div> right above it:

See this fiddle:

https://jsfiddle.net/CodeVirtue/z26tc7Ld/47/

Shrink the rendered frame so that it causes the picture to shrink vertically. Notice a scrollbar appears just for the height of the div right above it before the <video> also begins to shrink. Once the scrollable area is the same height as the header, the scrollable area no longer grows. I cannot figure out a way to prevent that scrollbar from appearing.

For the record, I am using vue-core-video-player: https://github.com/core-player/vue-core-video-player The class definitions of vid-container and vid-video are brought in by that component, as well as the <div> wrapping the <video>. However I can easily add other classes on the injected container <div>.

Here is the code from JSFiddle:

<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
<div id="app">
  <v-app>
    <v-card class="d-flex flex-column outerCard">
      <v-card class="d-flex flex-row pa-1 justify-space-between headerCard">
        <div class="font-weight-bold text-truncate my-auto">Abc</div>
        <div class="font-weight-bold px-2 text-truncate my-auto">Def</div>
      </v-card>
      <div class="flex-grow-1 vid-container">
        <video src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4" class="vid-video" controls></video>
      </div>
    </v-card>
  </v-app>
</div>

#app {
  background-color: red !important;
}
.outerCard {
  background-color: blue !important;
  height: 100vh;
  max-height: 100vh;
}
.headerCard {
  background-color: yellow !important;
}
.vid-container {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background-color: #000;
}
.vid-video {
  background-color: #000;
  width: 100%;
  height: 100%;
}

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data: {
  },
  methods: {
  }
})

Thanks!

来源：https://stackoverflow.com/questions/61552651/how-to-allow-flex-in-vuetify-to-exclude-a-header-when-vertically-shrinking-a-vid

标签

Vue.js

flexbox

vuetify.js