css - Por qué el select de Angular Material se desborda en la pantalla

Estoy utilizando el selector de Angular Material en mi aplicación, que puedes encontrar aquí https://material.angular.io/components/select/overview. El problema es que cuando colocamos el selector cerca de la parte inferior de la pantalla y se abre, se desborda de la pantalla. Esta es la captura de pantalla de lo que estoy experimentando. ¿Qué tipo de CSS se necesita para evitar que esto suceda?

   <mat-select style="margin-bottom: 0px;" placeholder="{{input1.title}}" >
                            <mat-option>None</mat-option>
                                               <mat-option *ngFor="let opt_value of input1.enumNameGroups[grp_value] let i = index" value="{{input1.enumidGroups[grp_value][i]}}" >{{opt_value}}</mat-option>
                                                </mat-optgroup>

      </mat-select>

Respuesta #1

Puedes sobrescribir el CSS predeterminado del panel del paginador para colocarlo en cualquier lugar de la pantalla:

::ng-deep .mat-select-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 300px;
  width: 100%; 
}

Cambia las propiedades de la clase dependiendo de dónde quieras colocar el elemento.