Vuetify equal height v-tab-items

Question

Please advise how to make vuetify v-tabs content displayed in equal height blocks. I found no options for this component in documentation which can help with height alignment.

By default v-tab-item height depends on its own content height:

Layout example:

<div id="app">
    <v-app id="inspire">
        <div>
            <v-tabs v-model="active" color="cyan" dark slider-color="yellow">
                <v-tab :key="tab-1">
                    tab 1

                </v-tab>
                <v-tab :key="tab-2">
                    tab 2

                </v-tab>
                <v-tab-item key="tab-1">
                    tab 1 content<br> tab 1 content<br> tab 1 content<br> tab 1 content<br> tab 1 content<br>
                </v-tab-item>
                <v-tab-item key="tab-2">
                    tab 2 content
                </v-tab-item>
            </v-tabs>

        </div>
    </v-app>
</div>

https://codepen.io/olegef/pen/MqKaxQ

Is it possible to align v-tab-items height by tallest v-tab-item using CSS only?

Answer 1

If you haven't tried yet, then setting your desired height (not min-height explanation here ) value in v-tabs__content class.

Codepen ...

 new Vue({ el: '#app' }) 

 .v-tabs__content { background-color: green; height: 100px; } 

 <div id="app"> <v-app id="inspire"> <div> <v-tabs v-model="active" color="cyan" dark slider-color="yellow"> <v-tab :key="tab-1"> tab 1 </v-tab> <v-tab :key="tab-2"> tab 2 </v-tab> <v-tab-item key="tab-1"> tab 1 content<br> tab 1 content<br> tab 1 content<br> tab 1 content<br> tab 1 content<br> </v-tab-item> <v-tab-item key="tab-2"> tab 2 content </v-tab-item> </v-tabs> </div> </v-app> </div> <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>