Vue 3 & Vuetify | Trouble getting content of Vuetify tab to scroll when there is overflow

Question

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>

Samball · Accepted Answer · 2025-04-30 14:09:10Z

0

One way to fix this would be to rename v-tabs-window to just v-window and use CSS styling:

<style>
  .v-window {
    position: relative;
    overflow-y: auto !important;
  }
</style>

And make some overal styling improvements, see this Vuetify Plaground

answered Apr 30 at 14:09

Samball

8791 gold badge17 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue 3 & Vuetify | Trouble getting content of Vuetify tab to scroll when there is overflow

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related