Solid – Virtualizing with a container using max-height doesn't show all items when total height is below max-height
Describe the bug
I have a dynamically sized virtual list whose container scroll element has a max-height style. This way, the container should shrink to the full list of items without needing a scrollbar if all of the items can fit below the max-height value.
However, this breaks in Solid. When the total size of the list approaches the max-height or exceeds it, only some of the items are shown.
See this example, where I have 5 items with an initial estimated size of 28px. Then I dynamically update the item size to be 198px. This adds up to a total height of 990px;. In this image, the container has a max-height of 1000px. Despite having enough room to fit everything, only 2 virtual items are returned by the virtualizer:
See reproduction here: https://codesandbox.io/p/devbox/competent-tristan-7467c3
Your minimal, reproducible example
https://codesandbox.io/p/devbox/competent-tristan-7467c3
Steps to reproduce
- go to https://codesandbox.io/p/devbox/competent-tristan-7467c3
- See that not all items are drawn
Expected behavior
If the max-height exceeds the total height needed to show all items, all items should be shown.
How often does this bug happen?
Every time
Screenshots or Videos
Platform
OSX Chrome
tanstack-virtual version
3.10.8
TypeScript version
No response
Additional context
No response
Terms & Code of Conduct
- [x] I agree to follow this project's Code of Conduct
- [x] 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.