Description

I have a simple, one column grid, where the card component is used to render the content. While it is displayed correctly initially, it breaks when scrolling further down - the grid does not always calculate the row height correctly. But even that is not consistent. Some rows are displayed correctly, some are not. It is not really predictable.

Initial displayment

When scrolling down

Expected outcome

The card should be rendererd correctly.

Minimal reproducible example

Grid<String> grid = new Grid<>();

grid.addComponentColumn(s -> {
    Card card = new Card();
    card.setTitle(s);
    card.setSubtitle(new Span("Subtitle " + s));
    return card;
});

grid.setItems(IntStream.range(0, 200).mapToObj(i -> "Item " + i).toList());

setSizeFull();
setFlexGrow(1, grid);

add(grid);

Steps to reproduce

1. Add the snippet to a Flow app
2. Scroll the grid

Environment

Vaadin version(s): 24.8.0.alpha6
OS: Windows 11

Browsers

Chrome and FF