# Variable Heights
> Automatic handling of variable item heights in Svelte Virtual List
**Source:** [https://virtuallist.svelte.page/docs/variable-heights](https://virtuallist.svelte.page/docs/variable-heights)
---
Svelte Virtual List automatically handles items with different heights. No configuration needed - heights are measured after render and cached for optimal performance.
> Live example: [/examples/variable-height](https://virtuallist.svelte.page/examples/variable-height)
## How It Works
The component uses a smart height estimation system:
1. **Initial Estimate**: Uses `defaultEstimatedItemHeight` (default: 40px) for unmeasured items
2. **Measurement**: After items render, actual heights are measured via ResizeObserver
3. **Caching**: Measured heights are cached to avoid re-measurement
4. **Averaging**: A running average is calculated for better estimates of unmeasured items
## Example
```svelte
{#snippet renderItem(item)}
{item.title}
{#if item.description}
{item.description}
{/if}
{/snippet}
```
## Adjusting the Estimate
If your items are typically larger or smaller than 40px, set a better initial estimate:
```svelte
```
A more accurate initial estimate improves scrollbar accuracy before items are measured.
## Dynamic Content
Items can change height at any time (e.g., expanding/collapsing). The component automatically detects height changes and adjusts scroll positions accordingly.