角材料中的自动宽度垫选项

Question

如何使mat-option自动选择列表中最长的项目的宽度。

<div class="col-md-3">
  <mat-form-field class="sm-width" appearance="outline">
    <mat-label>Дом</mat-label>
    <input (input)="InputBuilding($event)" matInput placeholder="№ дома" formControlName="buildingNumber" required maxlength="5" [matAutocomplete]="autoBuilding">
    <mat-autocomplete panelClass="mat-auto" #autoBuilding="matAutocomplete">
      <mat-option (onSelectionChange)="selectionChange(build)" *ngFor="let build of builds?.result" [value]="build.name">
        <span>{{build.typeShort}}. {{build.name}}</span>
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
  <mat-form-field class="sm-width" appearance="outline">
    <mat-label>Корпус</mat-label>
    <input matInput placeholder="Корпус" formControlName="structure" maxlength="3">
  </mat-form-field>
  <mat-form-field class="sm-width" appearance="outline">
    <mat-label>Квартира</mat-label>
    <input matInput placeholder="Квартира / Офис" formControlName="flat" maxlength="4" numbersOnly>
  </mat-form-field>
</div> 

Answer 1

尝试

::ng-deep mat-autocomplete {
    width: fit-content !important;
}

Answer 2

::ng-deep .cdk-overlay-pane {
      width: auto !important;
}

Answer 3

u可以这样尝试

.auto-width{
        .mat-form-field {
            width: auto !important;
        }
        .mat-select-value {
            max-width: 100%;
            width: auto;
        }  
    }