Adjustable width for mat-select options overlay pane

Question

I am using mat-select to display a list of options so when you click on the mat-select input filed, it shows a list of options using cdk-overlay-pane. The overlay container width gets set the same as mat-select input field. However, it adds extra width of 32px to display animation. This forces the container to appear outside the screen width Is there any way of the adjust the width of the the cdk-overlay-pane container width.

Answer 1

Try this code, it works but it is not dynamic.

::ng-deep .mat-form-field {
 width: 50px !important;
 }
::ng-deep .mat-label {
 width: 50px !important;
 }
::ng-deep .mat-select {
 width: 50px !important;
 }

::ng-deep .mat-option {
 width: 50px !important;
 }