#messenger { position: absolute; left: 0; right: 0; bottom: 0; top: 0; height: auto !important; .center { max-width: 1400px; margin: 0 auto; .content-card { position: relative; display: flex; flex: 1; border-radius: 8px; .mat-sidenav-container { display: flex; flex: 1; width: 100%; .left-sidenav { width: 300px; } .right-sidenav { width: 70px; } > .mat-sidenav-content, > .mat-drawer-content { display: flex; flex: 1 1 auto; min-height: 100%; width: auto; height: auto; } > .mat-drawer-content { max-width: 100%; } mat-sidenav { display: flex; flex-direction: column; width: 400px; max-width: 90%; overflow: hidden; } } } } }