缩放变化时mat-chip-option优先于toggle换行的布局问题

问题分析 #

当前使用justify-content: space-between的flex布局会导致空间不足时，Slide-Toggle先被挤到下一行。我们需要调整flex属性，让Chip列表优先占据可用空间并换行，Toggle仅在总空间完全不足时才换行。

修改方案 #

调整CSS样式 #

修改.dropdown的flex属性，同时给Chip列表和Toggle设置合适的flex规则：

.dropdown {
  padding-top: 5px;
  flex-grow: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* 允许容器内元素换行 */
  gap: 10px; /* 给Chip列表和Toggle之间添加间距 */
}

/* 让Chip列表占据剩余可用空间，并允许内部Chip换行 */
.mat-chip-listbox {
  flex-grow: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px; /* 调整Chip之间的间距 */
}

/* 确保Toggle不被压缩，保持自身宽度 */
.mat-slide-toggle {
  flex-shrink: 0;
}

核心逻辑说明 #

1. flex-wrap: wrap：允许容器内元素在空间不足时换行，替代原布局的强制不换行行为。
2. mat-chip-listbox设置flex-grow: 1：让Chip列表优先占据容器内的剩余空间，当空间不足时，内部Chip会先换行，而非挤压Toggle。
3. mat-slide-toggle设置flex-shrink: 0：确保Toggle不会被压缩变形，始终保持自身最小宽度，只有当容器宽度小于Chip列表最小宽度+Toggle宽度时，Toggle才会换行到Chip列表下方。

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

内容的提问来源于stack exchange，提问作者marshmellow