Popup with "position: absolute" gets cut off

[lucacervo98]

Hi,
I believe I’ve found an issue with ngx-scrollbar v15.1.3. When there’s a popup with position: absolute at the end of scrollable content, the popup content gets cut off if it exceeds the container's height. With the default browser scrollbar, this doesn’t happen: you can scroll down to view the entire content.

Additionally, this behavior worked correctly in ngx-scrollbar v13.0.3, so it seems to be a regression in the latest version.

Reproduction

ngx-scrollbar v15.1.3:
https://stackblitz.com/edit/ngx-scrollbar-shz5eu?file=src%2Fmain.ts

ngx-scrollbar v13.0.3:
https://stackblitz.com/edit/ngx-scrollbar-fh3pfd?file=src%2Fmain.ts

Default browser scrollbar:
https://stackblitz.com/edit/ngx-scrollbar-sgkyxt?file=src%2Fmain.ts

Steps to reproduce:

1. Scroll vertically the image container until the end
2. Click the "Open Popup" button
3. Try to scroll below to see the popup content

Expected Behavior

Container should let me scroll below to see the popup content.

Actual Behavior

Container doesn't let me scroll below to see the popup content.

Environment

• Angular: v18.2.1
• ngx-scrollbar: v15.1.3
• Browser(s): Google Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 11

[MurhafSousli]

This is caused by CSS, the content wrapper has contain: content when removed the scroll will include the absolute overlay layout, however, this has causes on the scrollbars layout to fail.

Adding position: relative on the content wrapper partially fixes the issue, but the horizontal scrollbar does not stick to the bottom

https://stackblitz.com/edit/ngx-scrollbar-6hhzgq?file=src%2Fglobal_styles.css

[MurhafSousli]

This is most likely a won't fix, even if you remove the contain: content the content wrapper that wraps the content won't adjust its dimensions to the absolute positioned elements height, which the scrollbar relies on for calculation.

I recommend you to use Angular CDK overlay to display pop ups instead.