Mat-Chips连续显示5

Question

我有一个Mat-Chips列表，我正在尝试通过倍数行显示它们。我想连续有5个芯片，而芯片的尺寸不增加（例如，有一个标准值，例如100px）。如果行上有一个元素，那将需要我不想要的整个宽度。我尝试了弹性的基础，但这是行不通的。我该怎么做？

HTML：

    <div class="chip" fxLayoutAlign="flex-start">
        <mat-form-field class="example-chip-list" appearance="fill">
  <mat-label>Favorite Fruits</mat-label>
  <mat-chip-list #chipList aria-label="Fruit selection">
    <mat-chip *ngFor="let fruit of fruits" id="chip-item" (removed)="remove(fruit)">
      {{fruit.name}}
      <button matChipRemove>
        <mat-icon>cancel</mat-icon>
      </button>
    </mat-chip>
  </mat-chip-list>
</mat-form-field>
    </div>

CSS：

.chip {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
}

#chip-item {
    flex: 1 0 25%;
}