Vuetifyのv-tabsのコンテンツを縦横100%のサイズにする

環境

nuxt.js : 2.6.3
vuetify.js : 1.5.5

問題

Vuetifyのv-tabsを使ってタブを作ろうとすると、コンテンツ部分のサイズが親要素のサイズに対して100%にならない。
.v-window__containerにスタイルを指定しても適用されず、高さの指定ができない。

解決策

スタイルのセレクタの指定の仕方に工夫が必要だった。

Vue.jsのテンプレートで<style scoped>のときには>ではなく、Vue特有の>>>が必要。(詳しくはこちら )

テンプレート

<template>
  <v-tabs dark color="grey darken-4" show-arrows>
    <v-tabs-slider color="yellow" />
    <v-tab v-for="i in 30" :key="i" :href="'#tab-' + i"> Item {{ i }} </v-tab>
    <v-tabs-items>
      <v-tab-item
        v-for="i in 30"
        :key="i"
        :value="'tab-' + i"
        :transition="false"
        :reverse-transition="false"
      >
        <v-card
          v-action
          flat
          height="100%"
        >
          <v-card-text>サンプル</v-card-text>
        </v-card>
      </v-tab-item>
    </v-tabs-items>
  </v-tabs>
<template>

<style scoped>
.v-tabs {
  width: 100%;
  height: 100%;
}

.v-window {
  height: calc(100% - 48px); /* タブ領域の高さを引く */
}

.v-tab__items,
.v-window-item,
.v-window >>> div.v-window__container { /* ここが重要 */
  height: 100%;
}
</style>