How can I make my Vuetify layout use all the available vertical space?

Question

I inherited a project where I need the layout to use as much viewport space as possible both horizontally and vertically, and resize nicely too.

My layout is pretty simple, with 2 main rows split in two columns. I need to make it so the two main "cells" (marked "Main 1" and "Main 2" in the code below) expand vertically to use as much vertical space as possible.

My understanding is this can be achieved using a <v-container fluid fill-height>. But while the horizontal part works perfectly well, I can't get this layout to expand vertically.

Here is my App.vue file (simplified for the purpose of this post):

<template>
    <v-app>
        <v-main>
            <v-container fluid fill-height>
                <v-row>
                    <v-col cols="6" class="yellow">Header 1</v-col>
                    <v-col cols="6" class="yellow">Header 2</v-col>
                </v-row>
                <v-row>
                    <v-col cols="8" class="pink">
                        <v-row>
                            <v-col cols="5" class="red">Main 1</v-col>
                            <v-col cols="7" class="red">Main 2</v-col>
                        </v-row>
                        <v-row>
                            <v-col cols="12" class="red">Bottom</v-col>
                        </v-row>
                    </v-col>
                    <v-col cols="4" class="pink">Right</v-col>
                </v-row>
            </v-container>
        </v-main>
    </v-app>
</template>

<style scoped>
  .yellow {  border: 1px dotted yellow  }
  .red {  border: 1px dotted red  }
  .pink {  border: 1px dotted pink  }
</style>

<script setup>

</script>

I also did set up a Vuetify playground for live testing.

Answer 1

OK, I hope this is what you were looking for. Notice how I made use of Vuetify's flex utility classes on the container and some of the rows. These classes are there to help you layout your page with flexbox. You can read more about it here.

<template>
    <v-app>
        <v-main class='d-flex'>
            <v-container fluid fill-height class='d-flex flex-column'>
                <v-row class='flex-grow-0'>
                    <v-col cols="6" class="yellow">Header 1</v-col>
                    <v-col cols="6" class="yellow">Header 2</v-col>
                </v-row>
                <v-row>
                    <v-col cols="8" class="pink d-flex flex-column">
                        <v-row>
                            <v-col cols="5" class="red">Main 1</v-col>
                            <v-col cols="7" class="red">Main 2</v-col>
                        </v-row>
                        <v-row class='flex-grow-0'>
                            <v-col cols="12" class="red">Bottom</v-col>
                        </v-row>
                    </v-col>
                    <v-col cols="4" class="pink">Right</v-col>
                </v-row>
            </v-container>
        </v-main>
    </v-app>
</template>