RGL should resize while vertical scrollbar appears

[CaptainJon]

Describe the bug

when increasing the height of an element enough, and the vertical scrollbar of the container appears, the whole RGL should resize, coz if it doesn't, the element at the righst side edge won't move its position to get enough space to the scrollbar, which leads to the scrollbar covers some content of the element, see the picture from official examples bellow:

this is how it looks like witout vertical scrollbar:

this is how it looks like whith vertical scrollbar:

Your Example Website or App

https://react-grid-layout.github.io/react-grid-layout/examples/6-dynamic-add-remove.html

Steps to Reproduce the Bug or Issue

1. open the link above
2. resize any element's height enough to let the container's vertical scrollbar appears

Expected behavior

rezie the whole RGL while vertical scrollbar appears. I think horizontal scrollbar has the same problem

react-grid-layout library version

1.3.4

Operating System Version

Windows 10 latest

Browser

Chrome

Additional context

No response

Screenshots or Videos

No response

[silentchallenger]

Issue comes from how browser considers the scrollbar. If you try it out on Firefox, there won't be any problem like that because Firefox considers scrollbar as overlay so it doesn't take space on page. However, in Chrome, scrollbar takes space on page and shifts the other elements. Since WidthProvider only listens resizing of window, it doesn't adjust the width if scrollbar comes into the page. To solve, you also need to listen for another aspect which can different for each project. In my case, I listen visualViewport to resize the grid.

[alakhpc]

Hi @silentchallenger, Do you have an example snippet on doing that?