Vuetify Maximize Height of v-list - vue.js

Question

I have this very simple chat app here:
It contains of a Header and then v-main. Inside v-main I first have a v-container containing a v-card. This v-card element has the Name as an title, then a v-list containing the messages, and finally, divided by an v-divider a simple v-form. The end of v-app also contains a v-footer.
Treeview:
v-app
v-app-bar
v-main
v-container
v-card
v-card-title
v-divider
v-list
v-divider
v-form
v-footer
Current code inside v-main->v-container:
The v-containersimply has the fluid property on it.
<template>
<v-card>
<!-- Card Title -->
<v-card-title>
{{ messageInfo.sender }}
</v-card-title>
<v-divider></v-divider>
<!-- Messages -->
<v-list
class="overflow-y-auto"
v-for="msg in $store.state.messages"
:key="msg.id"
>
<v-list-item>
<Message :message="msg" :isSender="isSender(msg)" />
</v-list-item>
</v-list>
<v-divider></v-divider>
<!-- Send Messages -->
<v-form v-model="valid" ref="form">
<v-container>
<v-row justify="center">
<v-col :cols="10">
<v-text-field
v-model="messageInfo.message"
:rules="messageRules"
:counter="maximumLength"
required
rounded
flat
background-color="primary"
color="tertiary"
#keydown.enter="validateAndSend"
></v-text-field>
</v-col>
<v-col :cols="1">
<v-btn
:disabled="!valid"
color="tertiary"
#click="validateAndSend"
icon
large
fab
>
<v-icon>mdi-message</v-icon>
</v-btn>
</v-col>
</v-row>
</v-container>
</v-form>
</v-card>
</template>
Question:
Can I maximize the height of the v-list-element, so that my v-form will always end right above the start of the v-footer, regardless of the contents of v-list? I don't have the height of v-list set yet (I think this is the problem, but unsure which height to choose).
I don't want there to be a huge gap between my "content" and the footer.
Also, when there are more messages than in the image, the v-list will simply list them (won't cut off), which then of course pushes down the v-form and the v-footer.
I am very unsure how to do this and couldn't really find anything on google or the vuetify website.
It is not important that the messages are wrapped in a v-list-component. I just need a way to scroll through messages, if necessary.
Additional information:
I am very new to vuetify and I am using nuxt.js (don't think that's important though).

Answer 1

Height of card:
This layout create scroll card for screen height. You need to set property fill-height for v-container.
Then you need to style card by position: absolute
<v-container fluid fill-height>
<v-card class="card">
...
</v-card>
</v-container>
Styles:
.card {
position: absolute !important;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 14px;
}
Stretching list in card:
Now you need to stretch v-list. I moved v-for from v-list to v-list-item. Then I just added
d-flex and flex-column on v-card. Last step is stretch the list by mt-auto
<template>
<v-card class="card d-flex flex-column">
<!-- Card Title -->
<v-card-title>
{{ messageInfo.sender }}
</v-card-title>
<v-divider></v-divider>
<!-- Messages -->
<v-list class="overflow-y-auto mt-auto">
<v-list-item v-for="msg in messages" :key="msg.id">
<Message :message="msg" :isSender="isSender(msg)" />
</v-list-item>
</v-list>
<v-divider></v-divider>
<!-- Send Messages -->
<v-form ref="form">
<v-container>
<v-row justify="center">
<v-col :cols="10">
<v-text-field
v-model="messageInfo.message"
required
rounded
flat
background-color="primary"
color="tertiary"
/>
</v-col>
<v-col :cols="1">
<v-btn>
<v-icon>mdi-message</v-icon>
</v-btn>
</v-col>
</v-row>
</v-container>
</v-form>
</v-card>
</template>
Scrolling list from bottom to top (pure css):
You also need to reverse scroll for list. You can easily do it by pure css with transform: rotateX(180deg)
Template:
<v-list class="overflow-y-auto mt-auto scroll-container">
<v-list-item class="scroll-container-item" v-for="msg in messages" :key="msg.id">
...
</v-list-item>
</v-list>
Styles:
.scroll-container {
transform: rotateX(180deg);
-webkit-transform: rotateX(180deg); /* Safari and Chrome */
-ms-transform: rotateX(180deg); /* IE 9+ */
-o-transform: rotateX(180deg); /* Opera */
}
.scroll-container-item {
-webkit-transform: rotateX(180deg); /* Safari and Chrome */
-ms-transform: rotateX(180deg); /* IE 9+ */
-o-transform: rotateX(180deg); /* Opera */
}