I'm struggling with what seems like a simple task.
All I want is for the upper half of the v-main to be taken up by one v-row, and the lower half by another v-row. If the content of either row overflows, it should be scrollable.
You can view the MWE here: https://codepen.io/chapkovski/pen/abwPYda
The HTML structure is as follows:
<div id="app">
<v-app id="inspire">
<v-app-bar color="#6A76AB" dark app>
 
</v-app-bar>
<v-main class='d-flex flex-column' app>
<v-container fluid>
<v-row class='yellow d-flex flex-column ' style='height:50%'>
<v-col v-for='item in items'>{{item}}</v-col>
</v-row>
<v-row class='red' fill-height style='height:50%'>RED</v-row>
</v-container>
</v-main>
</v-app>
</div>
For the CSS part:
.yellow {
overflow-y: scroll;
max-height:50%
}
And finally, the JavaScript code:
new Vue({
el: "#app",
vuetify: new Vuetify(),
data: () => ({ items: _.range(1, 100) }),
watch: {},
methods: {}
});