Grid virtualization not working when wrapped in component with div

[vibl]

Description

I'm having trouble getting virtualization to work when wrapping Grid in a Svelte component. I'm probably missing something obvious, but I couldn't find guidance in the docs.

When using Grid with the dynamic prop, wrapping it in a component that has a <div> around {@render children()} seems to cause virtualization to request all rows instead of just the visible slice.

Reproduction

App.svelte

<script>
  import { Grid } from 'wx-svelte-grid';
  import Wrapper from './Wrapper.svelte';

  const allRows = Array.from({ length: 1000 }, (_, i) => ({
    id: i + 1,
    name: `User ${i + 1}`,
    email: `user${i + 1}@example.com`
  }));

  const columns = [
    { id: 'id', header: 'ID', width: 80 },
    { id: 'name', header: 'Name', width: 200 },
    { id: 'email', header: 'Email', width: 300 }
  ];

  let visibleRows = $state([]);
  let rowCount = $state(allRows.length);
  let lastRange = { start: -1, end: -1 };

  function handleRequest(ev) {
    if (ev.row) {
      const { start, end } = ev.row;
      if (start === lastRange.start && end === lastRange.end) return;
      lastRange = { start, end };
      console.log('request-data:', start, '-', end);
      visibleRows = allRows.slice(start, end);
    }
  }
</script>

<div style="height: 400px; overflow: hidden;">
  <Wrapper>
    <Grid
      data={visibleRows}
      {columns}
      dynamic={{ rowCount }}
      onrequestdata={handleRequest}
    />
  </Wrapper>
</div>

Wrapper.svelte (doesn't work)

<script>
  let { children } = $props();
</script>

<div>
  {@render children()}
</div>

Wrapper.svelte (works)

<script>
  let { children } = $props();
</script>

{@render children()}

What I observe

• Without wrapper div: Console logs request-data: 0 - 25 (correct)
• With wrapper div: Console logs request-data: 0 - 1000 (all rows)

My understanding

I believe the intermediate <div> doesn't inherit the parent's height constraint, so the Grid measures a very large clientHeight and requests all rows. This pattern is common in Svelte 5 for theme wrappers or context providers.

Workarounds I found

These seem to work, but I'm not sure if they're the recommended approach:

1. display: contents on the wrapper div
2. height: 100% on the wrapper div
3. Remove the wrapper div entirely

Questions

1. Is there a recommended way to wrap Grid in a component while preserving virtualization?
2. Are there any props or configuration options I'm missing that would help here?
3. If this is expected behavior, would it be worth adding a note to the dynamic property docs?

Environment

• wx-svelte-grid: 2.1.1
• Svelte: 5.16.0
• Browser: Chrome 131

Thanks for any guidance!

[vibl]

I can provide a minimal example repo for reproducing the issue if you want.