Resize loop when a scrollbar appears at responsive breakpoint

[System-Glitch]

Software version (please complete the following information):

• Browser Chromium Version 106.0.5249.91
• Vue Version 3.2.26
• vue-grid-layout Version: 3.0.0-beta1

Describe the bug

When the window is resized, the component checks its new width and switches layout responsively. If the new layout is talller than the previous one, the height of the grid is increased. A scrollbar may appear on the parent container of the grid.

The scrollbar takes space, therefore reducing the width of the container. If the new width of the container due to the scrollbar width makes the grid switch breakpoint again, we end up in a resize loop.

For example, if our breakpoint is 996px and the scrollbar is 20px wide. If the grid reaches 996px due to a resize, it will switch to the wider breakpoint. The grid items are re-organized and the height of the grid increases. A scrollbar appears and takes space. The grid is now 976px wide (996-20px) and switches back to the previous breakpoint. The scrollbar disappears so the grid expands again and reaches 996px width again. Repeat.

I would have used the code sandbox template to demonstrate but this is using react-grid-layout, not vue-grid-layout. Do you have a template for vue?

To Reproduce Steps to reproduce the behavior:

1. Create a container with overflow-y: auto
2. Create a grid layout with an explicit breakpoint (for example { md: 996, sm: 0 }) inside this container
3. Define two layouts for the grid. the md layout must be taller than the sm layout.
4. Resize the container to make it so the sm layout can be contained by the container but not the md layout
5. Resize the width of the container to 996px
6. See the resize loop

Expected behavior The breakpoints should be calculated based on the width of the window or of the container, not on the width of the grid. Or maybe add an option to chose if the breakpoints should be based on the window or on the grid.