Flexbox / md-toolbar中的4个Md选择中断了响应式设计

Question

我有以下代码：

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

产生以下结果：

理想情况下，应该均匀地拉伸工具栏 为什么不这样做？

此外，在移动设备上：

正如您所看到的，它延伸到工具栏之外。糟糕！

通过检查元素，我注意到以下内容：

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

通过关闭它，它会使md-select元素变小，但不会相应地调整大小。我该如何解决这个问题？