Scrollable Angular Material stepper?

Question

I am trying to use the angular material stepper to fill the form at every step. However, the data I have is quite large to fill and the header text for the stepper is shrinking.

Something like this!

Is there any way I can make the header scrollable so that it doesn't shrink the header content I would like to add a scroll bar or something so it can be easily scrolled left and right.

Thanks

Answer 1

You can use the below CSS :

.mat-stepper-horizontal {
  display: flex;
  flex: 1 1 0;
  overflow-x: scroll;
}