How to get mat-tab with sticky header

Question

I have a mat-drawer with two tabs. When I scroll vertically each tab's content, I want tab's header to stick. I have seen the behavior I want on this example for table. I also have tried position: sticky from this example, but didn't work. What should I do to fix my problem? My code is:

<div id="svg_editor_container">
    <mat-drawer-container class="svg-workarea-container">     
        <mat-drawer mode="side" opened="true" class="svg-sidenav leave-header-area" disableClose>
            <mat-accordion multi="true">
                <mat-tab-group>
                    <mat-tab label="Tab1">
                            <ng-template mat-tab-label> 
                                {{ 'cmpny.editor-Tab1-tab' | translate }}
                                <mat-icon style="margin-left: 10px">picture_in_picture</mat-icon>
                            </ng-template>
                            <mat-expansion-panel class="svg-workarea-leftbar-p" (opened)="panelsState.panelView=true;savePanelState()" (closed)="panelsState.panelView=false;savePanelState()"
                                hideToggle="true" [expanded]="panelsState.panelView">
                               <!-- Tab1 content here -->
                            </mat-expansion-panel>
                    </mat-tab>
                    <mat-tab label="Tab2">
                        <ng-template mat-tab-label>
                            {{ 'cmpny.editor-Tab2-tab' | translate }}
                            <mat-icon style="margin-left: 10px;">widgets</mat-icon>
                        </ng-template>
                        <div *ngIf="editorMode === editorModeType.SVG">
                            <!-- Tab2 content here -->
                        </div>
                    </mat-tab>
                    </mat-tab-group>
            </mat-accordion>
        </mat-drawer>
        <!-- Other parts of container here -->      
    </mat-drawer-container>
</div>