Set horizontal scroll in angular material tabs

Question

If we see the following tabs in the mobile's browser, there are two buttons [pagination controls] (the first one is on the right side and the other is on the left side)

<mat-tab-group mat-stretch-tabs class="example-stretched-tabs mat-elevation-z4">
    <mat-tab label="Item-1"> Content 1 </mat-tab>
    <mat-tab label="Item-2"> Content 2 </mat-tab>
    <mat-tab label="Item-3"> Content 3 </mat-tab>
    <mat-tab label="Item-4"> Content 4 </mat-tab>
    <mat-tab label="Item-5"> Content 5 </mat-tab>
    <mat-tab label="Item-6"> Content 6 </mat-tab>
    <mat-tab label="Item-7"> Content 7 </mat-tab>
    <mat-tab label="Item-8"> Content 8 </mat-tab>
    <mat-tab label="Item-9"> Content 9 </mat-tab>
    <mat-tab label="Item-10"> Content 10 </mat-tab>
</mat-tab-group>

I'm going to remove the two buttons and use scroll instead.

Workaround :

(step-1) Remove the two buttons with the following code :

ngAfterViewInit(): void {
  document.getElementsByClassName('mat-tab-header-pagination-before')[0].remove();
  document.getElementsByClassName('mat-tab-header-pagination-after')[0].remove();
}

(step-2) put the following style in style.css:

.mat-tab-label-container {
    display: flex;
    flex-grow: 1;
    overflow: hidden;
    z-index: 1;
    overflow-x: scroll !important;
}

Problem:

The problem of the above method is when we select item-10 we can not scroll left

StackBlitz Here.

Answer 1

Instead of applying overflow style to .mat-tab-label-container, we can apply it to .mat-tab-header class.

::ng-deep .mat-tab-header {
  overflow-x: scroll !important;
}

::ng-deep .mat-tab-label-container { 
  overflow: visible !important;
}

Also, If you want to remove the scrollbar which comes below the element where overflow-x: scroll is used, we can do the following:

::ng-deep .mat-tab-header::-webkit-scrollbar {
  display: none;
}

Solution: The problem of the item-10 that cannot be scrolled left is solved by the above styles. I have forked @AbolfazlR repository and made the above changes. Below is the working example

StackBlitz