PrimeNg overlay panel is displayed with and without scrolling for the same content

I use the PrimeNG Overlay Panel to display popups in my Angular app.

I noticed that for the same content, it sometimes displays a scrollbar and sometimes does not. As you can see in the screenshots, the first one has a scrollbar and the second one does not.

The popup is opened by clicking an arrow in the table column header on the main page. The only difference I noticed is that the scrollbar appears when the clickable arrow is located closer to the bottom of the page.

The below is my code.

HTML Templates:

<p-overlayPanel #panelRef [style]="panelStyle" (onHide)="onPanelHide(item, panelRef)"> <div *ngIf="item?.entries?.length"> <app-item-details-popup [entries]="item?.entries"></app-item-details-popup> </div> </p-overlayPanel> <p-table [value]="items"> <ng-template pTemplate="header"> <tr> <th scope="col">Target</th> <th scope="col">Details</th> <th scope="col">Resource</th> </tr> </ng-template> <ng-template pTemplate="body" let-row> <tr> <td data-qa="target-value">{{ row.target }}</td> <td data-qa="details-value">{{ row.details }}</td> <td data-qa="resource-link"> <app-reference-block [references]="row?.resource"></app-reference-block> </td> </tr> <tr *ngIf="row.operator"> <td data-qa="operator" colspan="3" style="text-align: left; font-weight: bold"> {{ row.operator }} </td> </tr> </ng-template> </p-table>

panelStyle:

minWidth: '300px', maxWidth: '55vw', maxHeight: '80vh', overflow: 'auto', border: '1px solid #565555ff', borderRadius: '2px', padding: '7px'

In helper function:

panel.show(event,arrowRef);

Any thoughts on how this could happen would be really appreciated. Maybe there is a bug in PrimeNg or it is something wrong with my code?