I'm working on a layout that has specific requirements:
- The grey container should cover the entire viewport without exceeding it
- The green
v-rowshould occupy the grey container entirely v-col1 should utilize all available space and add a scrollbar if necessaryv-col2 should fill the available space but shrink when neededv-col3 should always be at the bottom and only take up required space
https://i.sstatic.net/8fL53.png
Currently, I have the given setup. The issue is that '1' doesn't become scrollable and ends up pushing '2' and '3' off-screen. What am I missing here?
Bonus question: Is there a better way to make the container fill the viewport? Using 100% isn't working for me.
Even more bonus: Would achieving this be easier using regular divs instead of the current setup?
<template>
<v-app>
<v-container class="ma-0 pa-0 d-flex full-height">
<v-row no-gutters class="d-flex flex-column flex-nowrap flex-1-0-100">
<!-- column 1 -->
<v-col class="overflow-y-auto flex-1-0">
<v-list :items="dummy"></v-list>
</v-col>
<!-- column 2 -->
<v-col class="d-flex justify-center flex-1-1-100">
<v-btn color="primary">+</v-btn>
</v-col>
<!-- column 3 -->
<v-col class="d-flex justify-center flex-0-1">
<v-btn color="secondary">Close</v-btn>
</v-col>
</v-row>
</v-container>
</v-app>
</template>
<script setup>
const length = 10 // Adjust for smaller/larger array
const dummy = [...Array(length).keys()]
</script>
<style scoped>
.full-height {
height: calc(100vh - 37px);
}
</style>