Angular CDK connect overlay with scroll to container

(First post here, so bear with me)

I have a table inside a container where I display an icon for rows that meet certain criterias. Clicking the icon should open an overlay to display some information, and the overlay should stay open even if I scroll inside the container. The scroll initially followed the body of the page, so I started creating a custom strategy. However, I cannot get it to follow the table scroll. The overlay sticks in one place and does not move accordingly.

Overlay is generated as below. Any tips on how this is generally solved would be appreciated!

private createOverlay() {
    const positionStrategy = this.overlay.position()
      .flexibleConnectedTo(this.overlayorigin.elementRef)
      .withFlexibleDimensions(false)
      .withPush(false)
      .withPositions([
        {
          originX: 'start',
          originY: 'bottom',
          overlayX: 'start',
          overlayY: 'top'
        },
        {
          originX: 'start',
          originY: 'top',
          overlayX: 'start',
          overlayY: 'bottom',
        }]);

    const overlayConfig = new OverlayConfig({
      hasBackdrop: false,
      scrollStrategy: this.overlay.scrollStrategies.reposition({autoClose: false}),
      positionStrategy: positionStrategy
    });


    this._overlayRef = this.overlay.create(overlayConfig);
    this._overlayRef.backdropClick().subscribe(_ => {
      this._overlayRef.detach();
      this.closeWarning.emit(true);
    });

    this._portal = new TemplatePortal(this.content, this.portal);
    this._overlayRef.attach(this._portal);
}

from Angular CDK connect overlay with scroll to container