为什么当我向child mat-chip-list添加一个新项目时，mat-form-field会增加它的高度？

Question

我mat-chip-list内有mat-form-field。每当我向列表中添加新的mat-chip时，mat-form-field的高度就会增加。我的代码中有哪些不正确的行为？

HTML：

      <mat-form-field>
        <mat-chip-list #contacts>
          <mat-chip *ngFor="let type of addedContactTypes" [selectable]="true" [removable]="true"
                    (remove)="removeContact(type)">
            <mat-icon [svgIcon]="contactTypeToDataMap.get(type).iconName"></mat-icon>
            <span class="margin-left-0-5rem">{{event[contactTypeToDataMap.get(type).fieldName]}}</span>
            <mat-icon matChipRemove svgIcon="cancel"></mat-icon>
          </mat-chip>
          <input placeholder="Контакты"
                 [matChipInputFor]="contacts"
                 [matChipInputSeparatorKeyCodes]="separatorKeyCodes"
                 [matChipInputAddOnBlur]="true"
                 (matChipInputTokenEnd)="addContact($event)">
        </mat-chip-list>
      </mat-form-field>

行为的屏幕截图：

提前致谢！

Answer 1

芯片跳转到下一行，因为它们不适合mat-form-field组件。要修复此问题，请添加到CSS：

mat-form-field {
    width: 100%;
}