An angular material modal MatDialog has no horizontal scroll bar

Question

I open a matdialog with these parameters and I cannot see the horizontal scroll bar

this.dialog.open(ModalComponent, {
  data: {
    isEditHistoric: true

  }, width: '500px', height: '40%'
}).afterClosed().subscribe((result) => {});

My ModalComponent has the following html

<div *ngIf="isEditHistoric; else editStatus">
  <mat-dialog-content>
    <app-mycomponent></app-mycomponent>
  </mat-dialog-content>
</div>

app-mycomponent contains a material table

<table  mat-table [dataSource]="dataSourceEntityList" multiTemplateDataRows>


    <!-- name Column -->
    <ng-container matColumnDef="name">

unfortunately, the horizontal scroll bar of the modal does not appear so I cannot see the whole table

I remarked that when I uncheck the line height: 100%; in the following css, I get the horizontal scroll bar but the height of the modal is then not correct

.cdk-overlay-container, .cdk-global-overlay-wrapper {
    pointer-events: none;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
} 

UPDATE

I shutdown my computer yesterday and started this morning and the error dissapeared. Unfortunately, the horizontal and vertical scroll bars are inside the modal while I would like them to be placed on the borders of the modal. Could you suggest me a solution