marshmellow's questions

我有一个下拉菜单，里面有一个

1. mat-chip 列表包含 2 个 chipoptions
2. 滑动垫切换“全部”

当选择所有切换时，它将选择两个芯片选项，因此当我们更改浏览器缩放级别时，如果芯片选项没有空间容纳，则芯片选项应该首先换行成多行，但切换不应该换行并保持不变

最初

chip1 chip2 toggle

当缩放改变时

例如：

chip1 toggle
chip2

chip2 应该在下方换行，但 toggle 仍将保留在右侧，但当我们进一步缩放时，toggle 会移出下拉菜单。因此，在这种情况下，如果 toggle 没有空间容纳下拉菜单，则它应该换行并位于第二个 chip 选项下方

例如：

chip1
chip2
toggle

我尝试更改 css，但发生的情况是先包装切换按钮，然后包装芯片选项。我该如何满足上述要求？

以下是我的 html 更改

<ng-template>
  <div class="dropdown">
    <mat-chip-listbox selectable multiple aria-label="opt group selection">
      <mat-chip-option
        *ngFor="let group of Options | slice: 1:3"
        [id]="group.id"
        [value]="group"
        class="filter-chip"
        [selected]="groupSelected(group)"
        #gp
        (click)="toggleGroupSelection(gp)"
      >
        {{ group.groupName }}
      </mat-chip-option>
    </mat-chip-listbox>
    <mat-slide-toggle
     
      (change)="toggle($event)"
      >All</mat-slide-toggle
    >
  </div>
</ng-template>

这是我的 CSS

.dropdown {
padding-top: 5px;
flex-grow: 1;
display: flex;
align-items: center;
justify-content: space-between;

}