Tengo el siguiente código:

 <form novalidate [formGroup]="form"> <div *ngIf="data"> <div fxLayout="row"> <md-select placeholder="Make" formControlName="make.name" (change)="onUpdate(form.value)" fxFlex="25"> <md-option *ngFor="let make of data.makes" [value]="make"> {{ make }} </md-option> </md-select> <md-select placeholder="Model" formControlName="model.name" (change)="onUpdate(form.value)" fxFlex="25"> <md-option *ngFor="let model of data.models" [value]="model"> {{ model }} </md-option> </md-select> <md-select placeholder="Year" formControlName="year.year" (change)="onUpdate(form.value)" fxFlex="25"> <md-option *ngFor="let year of data.years" [value]="year"> {{ year }} </md-option> </md-select> <md-select placeholder="Trim" formControlName="trim" (change)="onUpdate(form.value)" fxFlex="25"> <md-option *ngFor="let trim of data.trim" [value]="trim"> {{ trim }} </md-option> </md-select> </div> </div> </form>

Lo cual produce el siguiente resultado:

Idealmente, se supone que debe extenderse a lo largo de la barra de herramientas de manera uniforme.
¿Por qué no hace eso?

Además, en el móvil:

Como puede ver, se extiende más allá de la barra de herramientas. ¡Ay!

Al inspeccionar el elemento, noté lo siguiente:

 .mat-select-trigger { min-width: 112px; }

Al apagarlo, hace que los elementos md-select sean más pequeños, pero no cambia de tamaño en consecuencia. ¿Cómo puedo solucionar esto?