Set horizontal scroll in angular material tabs

I had solved these problems with scrolling by making my own auto-scroll effect on already scrollable mat-tabs - when you click on the partially visible tab - it will be autoscrolled to nearly center position, also left button will be scrolled to right, right partially visible button to left.

Please check this comment for more details: https://stackoverflow.com/a/62031767/9026103

It seems it is a known issue, and is still in open status.

A possible solution is using this scss rule(copied from the discussion of the issue) instead of the workaround you mentioned:

::ng-deep .mat-tab-header-pagination {
    display: none !important;
}

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