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>