How do you handle variable-height rows in TanStack Virtual?

Pass a measureElement callback so TanStack Virtual reads each row's actual rendered height and updates its internal size map. Provide estimateSize for initial layout before items are mounted.

<script setup lang="ts">
import { useVirtualizer } from "@tanstack/vue-virtual"
import { ref, computed }  from "vue"

const parentRef=ref<HTMLDivElement|null>(null)
const messages=ref(largeMessageList)

const virt=useVirtualizer({
  count:            computed(()=>messages.value.length).value,
  getScrollElement: ()=>parentRef.value,
  estimateSize:     ()=>80,
  overscan:         5,
  measureElement:   el=>el?.getBoundingClientRect().height,
})
const vItems = computed(()=>virt.value.getVirtualItems())
const totalH = computed(()=>virt.value.getTotalSize())
</script>
<template>
  <div ref="parentRef" style="height:600px;overflow-y:auto;">
    <div :style="{ height:`${totalH}px`, position:'relative' }">
      <div v-for="vi in vItems" :key="vi.key"
           :ref="node=>virt.measureElement(node)"
           :data-index="vi.index"
           :style="{ position:'absolute',top:0,
                     transform:`translateY(${vi.start}px)`,width:'100%' }">
        <MessageCard :message="messages[vi.index]" />
      </div>
    </div>
  </div>
</template>