Vertical scroll in overlay creating using angular-cdk

Question

I've used cdk's Overlay to show some content when a button is clicked. Everything working as expected except the vertical scroll mechanism.

Content inside the overlay is getting the vertical scrollbar when I'm reducing the height of the browser. Given max-height: 600px and height: 600px to both panelClass and content too. But still the same behaviour.

Tried to look into angular-material dialog code but unable to understand how scrolling is achieved.

Due to lack of clear documentation on Overlay.scrollStrategies i'm not clear If I have to look in this direction.

Below is code extract, which I'm using for making the Overlay.

.help-menu-overlay-panel-class {
    overflow-y: auto;
    box-sizing: border-box;
    border-radius: 5px;
    background-color: #fff;
    max-height: 600px;
    height: 600px;
}

.help-overlay-container {
   overflow-y: auto;
   height: 600px;
}



<button [helpMenuOverlayTrigger]="helpMenuOverlayTemplate"></button>


<ng-template #helpMenuOverlayTemplate>
    <div class="help-overlay-container">
        ...
    </div>
</ng-template>



const overlayConfig: OverlayConfig = new OverlayConfig(<OverlayConfig>{
        hasBackdrop: true,
        direction: this.dir.value,
        backdropClass: 'cdk-overlay-dark-backdrop',
        maxHeight: '600px',
        maxWidth: '400px',
        panelClass: ['help-menu-overlay-panel-class']
    });

overlayConfig.positionStrategy = this.overlay
    .position()
    .connectedTo(
        this.elementRef,
        {
            originX: 'start',
            originY: 'bottom'
        },
        {
            overlayX: 'start',
            overlayY: 'top'
        }
    )
    .withOffsetY(10)
    .withOffsetX(-4)
    .withDirection(this.dir.value);

// overlayConfig.scrollStrategy = this.overlay.scrollStrategies.reposition();

this._overlayRef = this.overlay.create(overlayConfig);

this._overlayRef.backdropClick().subscribe(
    () => {
        this._overlayRef.detach();
    }
);