Table row count change causes scrolling on Chrome when table is height limited

Describe the bug

This is an issue i came across when trying to implement shadcn's data table. My data table component is height constrained and nested under some nav bars, headers, footer, and so forth. I want the table to scroll within its container, like airtable does. It seems to work on firefox, but on Chrome when you change the page count it seems to cause the entire page in chrome to expand to the total table height (with the new rows), but the table stays within the container. However the result is a ton of empty space below the table

Here is the issue on shadcn I created.
https://github.com/shadcn/ui/issues/510

You can observe the bug here using chrome https://7jzsym-3000.csb.app/ ... or see codesandbox linked

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/async-cherry-7jzsym?file=%2Fcomponents%2Fui%2FDataTable%2FDataTable.tsx%3A73%2C64

Steps to reproduce

See example here. Change the row count

Direct link - https://7jzsym-3000.csb.app/

Expected behavior

This should not cause the table to expand in height or cause scrolling behavior on chrome

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Chrome

react-table version

8.9.1

TypeScript version

No response

Additional context

No response

Terms & Code of Conduct

• I agree to follow this project's Code of Conduct
• I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

Start with the linked CodeSandbox and reproduce the issue in Chrome by changing the row count in components/ui/DataTable/DataTable.tsx. Compare the constrained table behavior with Firefox and verify that changing the page size no longer expands the overall page or leaves empty space below the table.