Scroll Panel Bars not displaying correctly when the scrollpanel loses/gains width

[LarsHabier]

I'm submitting a ... (check one with "x")

[X] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Current behavior
If you are using the primeng scrollpanel in a horizontal layout (e.g. a div on the left and the scroll panel on the right side) and change the width of the div, the scroll panel bars are not displayed correctly. They appear to use the "old" positions although they should be calculated new when the overall width of the scrollpanel changes.

Expected behavior
The scrollpanel should calculate the correct positions of the scrollpanel bars if the width of the scrollpanel itself changes.

Minimal reproduction of the problem with instructions

1. Visit DEMO
2. Move your cursor to the button saying "Click me to change the width of the rectangle". Make sure you do not move the cursor outside of the scrollpanel.
3. Click the button which leads to the red div to receive a smaller width.
4. The scrollpanel bars are moving too although they should not.
5. If you move your cursor outside the scrollpanel and back in, the scrollbars get displayed correctly again.

What is the motivation / use case for changing the behavior?

We want to use a Sidebar on the left side of our application. The sidebar can be expanded so the given menu entries get a label. Obviously the sidebar gains width and the corresponding "main content" on the right loses width. The whole "main content" is wrapped in a scrollpanel.

Please tell us about your environment:

• Angular version: 11.0.5

• PrimeNG version: 11.0.0

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript X.X | ES6/7 | ES5]

• Node (for AoT issues): node --version =

[is-tongben]

@LarsHabier @yigitfindikli
Look at the source code to find the reason，I also encountered this problem, has been solved,I could write it this way

- html
   <p-scrollPanel #scrollPanelChild [style]="scrollPanelStyle">
       ...content
   </p-scrollPanel>
- ts
   public scrollPanelStyle = {width: '180px', height: '0px'};
   @ViewChild('scrollPanelChild', { static: false })
   public scrollPanelChild: ScrollPanel;

  ... 
    this.scrollPanelStyle.width = "xxxpx";
    this.scrollPanelChild?.cd.markForCheck();