MudBlazor - Page layouting

I am currently trying to create a MudBlazor WebApp.As I am quite new to MudBlazor I try to figure out how the spacing and page layouting works.

So i took a very basic layout from the MudBlazor Wireframes with drawer left and top appbar.

So my MainLayout.razor looks like this:

<MudLayout><MudAppBar Elevation="1"><MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())" /><MudSpacer /><MudIconButton Icon="@Icons.Material.Filled.MoreVert" Color="Color.Inherit" Edge="Edge.End" /></MudAppBar><MudDrawer @bind-Open="_drawerOpen" Elevation="2"><MudDrawerHeader><MudText Typo="Typo.h5" Class="mt-1">@Configuration["ApplicationSettings:AppName"]</MudText></MudDrawerHeader><NavMenu/></MudDrawer><MudMainContent>        @Body</MudMainContent></MudLayout>

And my page layout:

<MudGrid Justify="Justify.Center"><MudItem xs="2" Style="background-color: aqua; height: 90vh;"></MudItem><MudItem xs="8" Style="background-color: red; height: 90vh;"></MudItem><MudItem xs="2" Style="background-color: aqua; height: 90vh;"></MudItem><MudItem xs="12" Style="background-color: yellow; height: 10vh;"></MudItem></MudGrid>

So this is what is rendered:

Now there are two main problems that bother me

1. As you can see there is a vertical scrollbar because the yellow area flows out... I would like the yellow area to have a fixed height and the blue/aqua and red areas to take up the remaining vertical space. Something like height: auto or something like that. I thought 90vh means 90% of the parent containers height but appearently something went wrong here
2. There is also a horizontal scrollbar I cant explain as i am just working with the MudGrid which I can't even really influence and 12 stands for take whole available space