react-virtual – Visible items are incorrect on first render when using max-height on container

[skokenes]

Describe the bug

When using a dynamically sized list with a container with max-height, the first render of the virtualizer correctly sets the height of the list after measuring the elements, but does not show the correct number of items. If another render is forced, then the virtualizer updates with the correct number of items. See the attached video and https://codesandbox.io/p/sandbox/tanstack-virtual-react-max-height-bug-forked-wtscyh?workspaceId=d07a637a-3808-4246-a35e-982f2bc7080c

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/tanstack-virtual-react-max-height-bug-forked-wtscyh?workspaceId=d07a637a-3808-4246-a35e-982f2bc7080c

Steps to reproduce

1. Open https://codesandbox.io/p/sandbox/tanstack-virtual-react-max-height-bug-forked-wtscyh?workspaceId=d07a637a-3808-4246-a35e-982f2bc7080c
2. See that the virtualizer is showing only 2 items, when more can fit
3. Wait 3s, then observe when re-render is forced that virtualizer now shows the correct number of items

Expected behavior

When the virtualizer is used with dynamically sized elements and a container with max-height instead of a fixed height, after measure some elements it should show the correct number of visible items needed to fill the container space.

How often does this bug happen?

Every time

Screenshots or Videos

CleanShot.2024-11-01.at.09.10.29.mp4

Platform

OSX Chrome

tanstack-virtual version

v3.10.8

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.