Layout: how to have the scrollbar inside the q-page-container, and not showing over the toolbar?

[gotson]

Hi, i recently picked up Quasar, coming from a Vuetify background.

I am trying to configure a simple layout with a toolbar, a left drawer, and a main content area. I have a problem with the scrollbar that shows on the full height of the web page when the content in the QPageContainer overflows.

Here is what it looks like:

I would like to achieve a layout where only the QPageContainer scrolls, like so:

How can i achieve that ?

Here is what my layout looks like:

<q-layout view="hHh Lpr lFf">
  <q-header elevated>
    <q-toolbar>
    ...
    </q-toolbar>
  </q-header>

  <q-drawer/>

  <q-page-container>
    <q-page padding>
      <router-view />
    </q-page>
  </q-page-container>
</q-layout>

[FragsterAt]

https://codepen.io/FragsterAt/pen/ogXoNjo