Scroll bar in the main section of a v-app

Question

I have copied one of the pre-defined layouts from https://vuetifyjs.com/layout/pre-defined.

However when the content of the main section overflows it cause a scroll to appear for the whole app, rather than a local scroll to the main section. Here is an example:

<template>
    <v-app toolbar footer>

        <v-toolbar class="blue darken-3" dark>
        </v-toolbar>

        <v-navigation-drawer permanent clipped light absolute>
        </v-navigation-drawer>

        <main>
            <v-container>
                <p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p>
            </v-container>
        </main>
    </v-app>
</template>

I've tried adding class="scroll-y" and style="max-height: 100%" to various sections with no progress.

What do I need to specify for the scroll to only affect the main section?

Answer 1

This issue work for me, just adding

<style>
  html { overflow-y: auto }
</style>

to your style file.

Full documentation hide scroll bar

Answer 2

I found this to work for the issue I was having:

    html{
      overflow-y: hidden;
    }

You can put that in your App.vue file, or in the projects index.html target file