marshmellow's questions

Eu tenho um menu suspenso, dentro dele eu tenho um

1. lista de mat-chip que tem 2 opções de chip
2. um tapete-deslize-alterne "Todos"

Quando All toggle estiver selecionado, ele selecionará ambas as opções de chip. Portanto, quando estivermos alterando o nível de zoom do navegador e se as opções de chip não tiverem espaço para caber, as opções de chip devem primeiro ser quebradas em várias linhas, mas a alternância não deve ser quebrada e permanecer a mesma.

inicialmente

chip1 chip2 toggle

quando o zoom muda

por exemplo:

chip1 toggle
chip2

chip2 deve envolver abaixo, mas o toggle permanecerá no lado direito. Mas, novamente, quando estamos ampliando mais, o toggle está saindo do menu suspenso. Então, neste caso, se o toggle não tiver espaço para caber dentro do menu suspenso, ele deve envolver e ficar abaixo da 2ª opção de chip.

por exemplo:

chip1
chip2
toggle

Tentei fazer alterações no CSS, mas o que está acontecendo é que ele está envolvendo primeiro o toggle e depois o chipoptions. Como posso fazer os requisitos acima funcionarem?

abaixo estão minhas alterações de 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>

este é meu css

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

}