Issue when placed inside a grid or flex container

[d3lm]

Hey there 👋 Thanks for this awesome library!

I am trying to place the virtual list in a flex / grid container but I am having issues getting the virtual list to behave correctly. Setting the height to 100% works as expected for the element as it uses the remaining height, but the scroll seems to be broken then.

I have created an example to demonstrate the issue: https://stackblitz.com/edit/vitejs-vite-d1z9nv?file=src%2FApp.svelte&terminal=dev

Any idea how to fix this?

[mrxbox98]

Hi I was just running into the same issue. Did you happen to find a fix at some point?

[mrxbox98]

I think I found the issue, atleast the one I was facing where trying to scroll back up would glitch out.
The logic at https://github.com/v1ack/svelte-virtual-scroll-list/blob/master/src/lib/virtual.js#L151 is faulty when items are grids or flexboxes. Still not sure why though.

Here I an scrolling up the entire time:

[mrxbox98]

Found the issue for me. I had content-visibility: auto; in the element I was attempting to render so when the element was far away its height was set to 0 causing the scrollTop property of the root element to sporadically change.