Sidenav angular materials trying to be side to side with other component - html

Question

The Problem: In an angular project I have a single component for the sidenav menu and I'm trying to put other component sided with the sidenav, but since the sidenav element has full height the other component just goes to the bottom of the page. I tried to use display flex, but still goes to the bottom of the page.
Sidenav - html
<mat-drawer-container class="container" autosize>
<mat-drawer #drawer class="p-5" mode="side">
<!-- Content for side menu -->
<!-- Title -->
<h2 class="mt-5">Menu</h2>
<!-- Menu options-->
<button mat-button class="m-2" [matMenuTriggerFor]="workexperience">Experiência
Profissional</button>
<button mat-button class="m-2" [matMenuTriggerFor]="studies">Educação</button>
<button mat-button class="m-2" [matMenuTriggerFor]="skills">Habilidades</button>
<...>
<!-- Option work experience-->
<mat-menu #workexperience="matMenu">
<button mat-menu-item>text</button>
<button mat-menu-item>text</button>
</mat-menu>
<...>
</mat-drawer>
</mat-drawer-container>
<nav class="navbar navbar-light cyan darken-3 text-white fixed-top">
<button type="button" mat-button (click)="drawer.toggle()">
<mat-icon class="mx-2">menu</mat-icon>
<p class="mr-4 d-inline">Menu</p>
</button>
<button type="button" routerLink="/home" routerLinkActive="active" mat-raised-button>
<mat-icon class="d-inline mx-2" aria-label="Example home icon">home</mat-icon>
<p class="mr-4 d-inline">Home</p>
</button>
<a class="navbar-brand d-inline mx-5" routerLink="/bio">
<img class="rounded-circle z-depth-2" alt="80x80" height="35" src="https://mdbootstrap.com/img/Photos/Avatars/img%20(31).jpg"
data-holder-rendered="true">
<p class="d-inline mx-3 text-white">text</p>
</a>
</nav>
Sidenav- css
.container {
display: inline-block;
height: 100%;
background-color: white;
}
The other component that I want to be on the rigth of the navside.
The other component html
<mat-grid-list cols="4" rowHeight="500" class="m-5 sidenav-content">
<mat-grid-tile
*ngFor="let tile of tiles"
[colspan]="tile.cols"
[rowspan]="tile.rows"
[style.background]="tile.color">
{{tile.text}}
</mat-grid-tile>
</mat-grid-list>
The other component css
.sidenav-content{
display: flex;
height: 100%;
}