使 v-treeview 与 flexbox 中的行具有相同的高度

Question

我在https://codepen.io/james-hudson3010/pen/gOPEbvx 有一个 CodePen

我目前看到的是：

我想知道我需要改变什么，所以红色区域被黄色区域覆盖......黄色区域是 v-treeview 组件的区域。红色区域只有比左栏的内容短时才会出现。

我尝试将各种高度设置为 100%，但我遗漏了一些东西。

HTML：

<div id="app">
  <v-app id="inspire">
    <v-container class="green lighten-5" fluid>
      <v-row no-gutters dense style="flex-wrap: nowrap" class="align-stretch primary lighten-3">
          <v-col class="flex-grow-0 flex-shrink-0" style="flex-basis: 20em;">
              <v-card flat class="green lighten-3" style="height: 100%;">
                
                  Some Column Context<br>
                  Some Column Context<br>
                  Some Column Context<br>
                  Some Column Context<br>
                  Some Column Context<br>
                  Some Column Context<br>
                  Some Column Context<br>                
                
              </v-card>
          </v-col>
          <v-col class="flex-grow-2" style="background-color: red;">

            <v-tabs
                v-model="tab"
                background-color="primary lighten-3"
                style="height: 100%"
            >                

                <v-tab
                    v-for="tabName in tabNames"
                    :key="tabName.id"
                    :href="`#${tabName}`"
                >

                    {{ tabName }}
                  
                </v-tab>

                <v-tab-item
                    v-for="tabName in tabNames"
                    :key="tabName.id"
                    :value="`${tabName}`"
                    class="yellow lighten-4"
                    style="height: 100%"                            
                >

                    <v-container fluid style="height: 100%">
                        <v-row dense col no-gutters class = "rowborder">
                            <v-col cols = "12">
                                <v-treeview dense activatable :items="childrenForTab">
                                    <template v-slot:label="{ item }">
                                        <span class="treeItem">{{ item.name }}</span>
                                    </template>
                                </v-treeview>
                            </v-col>
                        </v-row>
                    </v-container>

                </v-tab-item>           

            </v-tabs>             
            
          </v-col>
      </v-row>
    </v-container>
  </v-app>
</div>

JavaScript：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  
  data() 
  {
    return {
      tabNames: [ 'a', 'b' ],
      tab: null,     
    }
  },
  
  computed: 
  {
    childrenForTab()
    {
      if ( this.tab == 'a' )
      {
        return [
          { name: '1' },
          { name: '2' },
          { name: '3' },
          { name: '4' }         
        ]    
      }
      else
      {
        return [
          { name: '1' },
          { name: '2' }      
        ]           
      }
    }
  }
  
})

Answer 1

只需在你的 CSS 中添加这个：

.v-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.v-window.v-item-group {
  flex-grow: 1;
}

.v-window__container {
  height: 100%;
}