I'm trying to get the content of a Vuetify tab to scroll without statically sizing the parent control.
Here is a Vuetify playground that contains the structure of my project:Vuetify Playground
You will see some seemingly redundant controls, but that is because parts of the playground have been separated into their own components in my actual project. The text area is also just there to demonstrate a control that overflows.
I've tried using fill-height, height='100%', and flex-1-1-100 (I don't know what this actually does, but I saw someone use it on a form)
Here is the code from the playground:
<template><v-app><v-layout><v-main max-height="100vh"><v-container class="pa-0 d-flex flex-column ma-0" fluid><v-container class="pa-0 d-flex flex-column flex-nowrap" fluid><v-row class="ma-0 pa-0"><v-col :class="['d-flex', 'pb-2', { 'justify-center': mobile }]"><p class="text-h5 font-weight-bold">Name</p></v-col></v-row><v-row class="ma-0 pa-0 flex-1-1-100"><v-col :class="['pt-0', 'pr-0', 'pl-0', { 'pl-2': !mobile }]"><v-container class="pa-0 ma-0 d-flex flex-column overflow-y-auto"><v-tabs v-model="tab" color="primary" class="pa-0 ma-0" align-tabs="start" :fixed-tabs="mobile"><v-tab text="Details" value="details"></v-tab><v-tab text="Other" value="other"></v-tab></v-tabs><v-tabs-window v-model="tab" class="pl-2 pr-2"><v-tabs-window-item value="details" :transition="false"><v-textarea class="text-h1" no-resize auto-grow v-model="notes"></v-textarea></v-tabs-window-item><v-tabs-window-item value="other" :transition="false"></v-tabs-window-item></v-tabs-window></v-container></v-col></v-row></v-container></v-container></v-main></v-layout></v-app></template><script setup> import { ref } from 'vue' import { useDisplay } from 'vuetify' const { mobile } = useDisplay() const tab = ref('details') const notes ='aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'</script>