How to make my vuetify 3 nuxt 3 application use the visible viewport

My problem is controlling my Vuetify 3 Nuxt 3 applications scroll behavior. What I want to achieve is the following:

What I actually have is the following:

I want the application to fill out the full viewport, I want a navbar at the top of the application and a navigation-drawer on the left. There should be no scrollbar except if the content of the main area are higher than the areas height. Right now there's 3 scrollbars even though the whole content should fit in the view port.

I tried a lot of things, like setting html and body to width:100vw;height:100vh;, setting heights and overflows of the other nested nodes but until now I can't get the html and body to take up only the visible viewport, there's always a few pixel more at the bottom as you see on my screenshots. I can hide the overflow using overflow: hidden but than I'm not able to scroll the main area on overflow later. Maybe there's an obvious solution but I'm a total beginner in css...

I am not sure of the behavior of Vuetify, but removing this works well

html, body {
  /* height: 100vh; */
  /* width: 100vw; */
  margin: 0;
  padding: 0;
  overflow: auto;
  background-color: rgb(34, 34, 143);
}

* {
  /* border: 1px solid #a45abd; */
}

Using those units is quite dangerous, let the page flow.