Hide scrollbar in quasar webapp

I have a Quasar webapp with a standard layout of a header, container and a footer. Header and Footer is stuck in place. When the container is having enough content it will overflow with a fine quasar scrollbar. (The scrollbar is showed in full lenght, "on top" of header/footer also.)

How to hide that scrollbar? Ive tryed applying the "hide-scrollbar" class to everything, but nothing removes it?

Solution

Fixed by wrapping the main container into a scroll-area and styling it:

<q-scroll-area style="height: 100vh; max-width: 100vw;" :bar-style="{width: '0px'}" :thumb-style="{width: '0px'}">
  <q-page-container style="max-width: 100vw;" class="desktop-hide bg_all">
    <router-view v-slot="{ Component }">
      <transition
        enter-active-class="animated fadeIn"
        leave-active-class="animated fadeOut"
      >
        <component :is="Component" />
      </transition>
    </router-view>
  </q-page-container>
</q-scroll-area>