如何在<mat-select>的多个<mat-option>中甚至在宽度内组成元素？ （角度）

Question

我正在尝试创建一个可以在所有应用程序中使用的过滤器组件。我们正在使用材质角库进行此操作。

工作正常，它显示了要选择的产品列表，但是，正如您所看到的，mat-option的每次迭代都返回两个值，即简短描述和详细描述。

如您所见，不同选项的宽度会有所不同，以适应简短说明（粗体显示）的宽度。

我想要实现的是将选项的宽度调整为最长的文本的宽度，如下所示。

我不能使用固定大小，因为这只是我要使用的许多过滤器之一，并且我需要一个全局解决方案，允许我重新利用过滤器组件。

<mat-form-field>
    <mat-select [ngSwitch]="filter.className" (focus)="getValuesActiveFilter(filter)" (selectionChange)="checkFilters()"
        [formControl]="filter.control" placeholder="{{filter.placeholder|i18n}}" [multiple]="filter.multiple">
        <span *ngSwitchDefault class='filter-default'>

            <mat-option class='mat-flex' *ngFor="let valor of filter.filteredValues | async" [value]="valor">
                <span class='short-desc'>
                    <filters-render [renderTagYesNo]="false" [valor]="valor" [filter]="filter"></filters-render>
                </span>
                <span class='long-desc'>
                    &nbsp;{{valor.desc}}
                </span>
            </mat-option>

        </span>
    </mat-select>
</mat-form-field>

.mat-option-text{
        display: flex!important;

        .short-desc{ flex: 0 0 auto;}
        .long-desc{ flex: 1 0 auto;}
    }