webkit-scrollbar привязка к отдельному списку, не затрагивая отдельный элемент контекстного меню

Мне нужно, чтобы прокрутка была не на всю длину контекстного меню, а в зоне списка участников. Можете ли вы посоветовать мне, как это можно сделать?

Контекстное меню

.right-align .mat-dialog-container {
        padding: 0;
        height: fit-content;
        width: 250px;
        overflow: auto;
        position: absolute;
        right: 40px;
        top: 150px;

        &::-webkit-scrollbar {
            display: block;
        }
    }
<div>
  <ng-container *ngIf="currentUser$ | async as currentUser">
    <div class="user-list">
      <div *ngFor="let participant of currentChat.participants" [class.its-me]="participant.userId === currentUser.id" class="user">
        <div (click)="openChat(participant.user.id)" class="about">
          <vks-avatar-smart [entity]="participant.user" size="35"></vks-avatar-smart>
          <span class="participant-name">{{participant.user.name}}</span>
        </div>
        <div *ngIf="participant.userId !== currentUser.id && currentChat.participants.length > 2" class="actions">
          <vks-icon [matTooltip]="'REMOVE_PARTICIPANT' | translate" (click)="deleteUser(participant.user)" class="square14" color="#12161C" icon="x-8"></vks-icon>
        </div>
      </div>
    </div>
  </ng-container>
</div>
<div class="btn-add">
  <ng-container *ngxPermissionsOnly="'chat:create'">
    <mat-divider></mat-divider>
    <div class="users-actions">
      <button vks-button [label]="'ADD_PARTICIPANTS' | translate" (click)="openUserPicker()" class="btn-anchor">
            </button>
    </div>
  </ng-container>
</div>


Ответы (0 шт):