I have the following code:

<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>

Which produces the following result:

Ideally, it's supposed to stretch across the toolbar evenly.
Why doesn't it do that?

Additionally, on mobile:

As you can see, it stretches beyond the toolbar. Yikes!

By inspecting the element, I noticed the following:

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

By turning it off, it makes the md-select elements smaller, but doesn't resize accordingly. How do I fix this?