Содержимое внутри mat-sidenav-content обрезается при использовании mat-toolbar внутри mat-sidenav

Question

Я использую угловой 5 и материал. я использовал панель инструментов внутри mat-sidenav, чтобы показать заголовок выбранной вкладки. когда я выбираю вкладку, имя которой [значение routeData здесь в коде] больше, чем ранее выбранная [выбранная по умолчанию вкладка, т.е. первая вкладка]. Контент с правой стороны внутри mat-sidenav-content обрезается. пожалуйста помоги.

<mat-sidenav-container class="example-container">
            <mat-sidenav mode="side" opened>
                <mat-toolbar>
                    <span>
                        {{routeData}}
                    </span>
                </mat-toolbar>
                <mat-nav-list>
                    <a mat-list-item href="..." routerLink="{{component.path}}" 
        *ngFor="let component of routes" (click)="onClickNav(component)">
                        {{ component.data[0].name }}
                        <mat-divider></mat-divider>
                    </a>
                </mat-nav-list>
            </mat-sidenav>
            <mat-sidenav-content>
                <router-outlet></router-outlet>
            </mat-sidenav-content>
        </mat-sidenav-container>