Mat菜单宽度根据其具有的子级数目动态增加/减少

Question

我有一个带有项目列表的弹出菜单。 列表项的数量可以变化。它可以是2-5或40-50，具体取决于阵列的内容。 当列表项中有更多数据时，它必须类似于以下内容。当它有1到10个项目时，它应该仅显示一个div，并且应该根据孩子的宽度调整菜单宽度。  

我已经经历过这个 How to increase the width of the mat-menu-item? 但是，这并没有帮助我。 目前正在使用

::ng-deep .cdk-overlay-pane .mat-menu-panel {
  min-width:800px !important;
}

上面的代码可以增加mat菜单面板的宽度。但是在我的情况下，当列表只有10个项目时，宽度可以为200；而当列表有40-50个项目时，宽度为800。如何动态调整垫子菜单的宽度？

<div class="user-name"
           [matMenuTriggerFor]="teamsMenu">
        <mat-icon>more_vert</mat-icon>
      </div>
<mat-menu #teamsMenu="matMenu"
                class="menu-width"
                yPosition="below"
                xPosition="after"
                [overlapTrigger]="false">
        <div fxLayout="row" #menuContainer>
          <div fxFlex="25" class="card-container" fxLayoutAlign="center center" fxLayout="column">
            <div class="card-user-name" style="cursor: pointer">
              {{userName | slice:0:1 | titlecase}}
            </div>
            <div class="name">{{userName}}</div>
            <div>{{teamName}}</div>
            <div>{{roleName}}</div>
          </div>
          <div fxFlex="0.25" style="background: whitesmoke; margin: 1rem 0 1rem 0;" class="card-separation"></div>
          <div fxFlex="">
            <mat-nav-list fxLayout="row wrap" fxLayoutGap="1em">
              <a class="team-selection-buttons" fxFlex="calc(25% - 1em)" mat-list-item *ngFor="let teamObj of teamArray;">
                <span class="team-selection-buttons-span">{{teamObj.team_name}}</span>
              </a>
            </mat-nav-list>
          </div>
        </div>
      </mat-menu>

这是我代码的HTML部分。

我想根据垫子菜单项的数量来增加/减少垫子菜单的宽度。