Grid vertical scroll broken with Aura base styles - #scroller missing position:absolute

[StyshakSergey]

Describe the bug

When using the Aura theme (either via @Stylesheet(Aura.STYLESHEET) or dynamically via addStyleSheet()), the Grid component loses vertical scrolling capability. The grid
expands to its full content height instead of constraining to the allocated space and scrolling internally.

The Lumo theme provides shadow DOM styles for the grid's #scroller element that constrain it to the grid bounds:

/* Lumo grid styles (vaadin-lumo-styles/src/components/grid.css) */
#scroller {
position: absolute;
inset: 0;
min-height: 100%;
height: auto;
width: auto;
}

The base styles used by Aura have a different definition:

/* Base grid styles (grid/src/styles/vaadin-grid-base-styles.js) */
#scroller {
position: relative;
overflow: hidden;
}

With position: relative, the #scroller expands with its content. With position: absolute; inset: 0, it is constrained to the grid host's bounds, allowing #table (overflow:
auto) to scroll.

The Aura theme (@vaadin/aura/src/components/grid.css) does not provide shadow DOM overrides for #scroller, so it relies on the base styles which lack the absolute
positioning.
The issue occurs specifically with horizontal SplitLayout (default orientation). Vertical SplitLayout works correctly because flex-direction is column and the grid
height is controlled by flex along the main axis.

Workaround

Inject the Lumo-equivalent #scroller styles into the grid's shadow DOM:

grid.getElement().executeJs(
"const s = new CSSStyleSheet();" +
"s.replaceSync('#scroller { position: absolute; inset: 0; min-height: 100%; height: auto; }');" +
"this.shadowRoot.adoptedStyleSheets = [...this.shadowRoot.adoptedStyleSheets, s];"
);

Expected-behavior

Grid should have an internal vertical scrollbar, same as with the Lumo theme

Reproduction

1. Create a Vaadin 25 application with @Stylesheet(Aura.STYLESHEET) on the AppShellConfigurator
2. Add a Grid with more items than fit in the viewport
3. Place the Grid inside a horizontal SplitLayout (default orientation) within a VerticalLayout
4. Observe: no vertical scrollbar, the page scrolls instead of the grid

System Info

• Vaadin 25.0.7
• Aura theme loaded via @Stylesheet(Aura.STYLESHEET)
• Grid inside SplitLayout inside VerticalLayout

[sissbruecker]

Can not reproduce the issue with this snippet:

@Route("")
public class TestView extends Div {
    public TestView() {
        Grid<Integer> grid = new Grid<>();
        var items = IntStream.range(0, 100).boxed().toList();
        grid.setItems(items);
        grid.addColumn(i -> "Item " + i).setHeader("Items");

        SplitLayout splitLayout = new SplitLayout();
        splitLayout.addToPrimary(grid);
        splitLayout.addToSecondary(new Div("secondary content"));
        
        VerticalLayout outerLayout = new VerticalLayout(splitLayout);
        add(outerLayout);
    }
}

Please provide a code snippet or project that reproduces the issue. Here is the demo project I used for testing:

grid-repro.zip

[StyshakSergey]

@Route("")
public class TestView extends VerticalLayout {
    public TestView() {
        setSizeFull();

        Grid<Integer> grid = new Grid<>();
        grid.setItems(IntStream.range(0, 100).boxed().toList());
        grid.addColumn(i -> "Item " + i).setHeader("Items");

        grid.setHeightFull();

        SplitLayout splitLayout = new SplitLayout(grid, new Div("secondary"));
        splitLayout.setSplitterPosition(75);

        add(new HorizontalLayout(new Span("Header")), splitLayout);
        expand(splitLayout);
    }
}

You can change @Stylesheet(Aura.STYLESHEET) to @Stylesheet(Lumo.STYLESHEET) and see difference, it works
and when use Aura grid has no scroll

[jouni]

Thanks, can reproduce now.

The issue comes from <vaadin-split-layout> not having overflow: hidden in base styles. Adding min-height: 0 achieves the same result. Basically, we need to ensure that split-layout can shrink inside a flex container.

Workaround:

vaadin-split-layout {
  min-height: 0;
}