Layout issues using Scroller

Hi all,
I’m having issues with a layout where the content inside a flex layout extends beyond the screen (in vertical).
I have placed the content in a Scroller and this works fine. But if the layout contains another component at the top (menubar or button etc.) the screen pushes beyond the bottom of the screen.
If I remove the inner layout, (menubar still included) the layout expands to fill the screen.
Edited: Using Vaadin 14.8.17

`@Route(“”)
public class MainLayout extends VerticalLayout implements RouterLayout {

private static final long serialVersionUID = 2117270416195829273L;

public MainLayout() {
    this.setId(this.getClass().getSimpleName());
    setSizeFull();
    
    UI.getCurrent().navigate(TestLayout.class);
}

}`

`@Route(value = “TestLayout”, layout = MainLayout.class)
public class TestLayout extends VerticalLayout {

private static final long serialVersionUID = -4806102758656391807L;

public TestLayout() {
    setId("TestLayout");
    setSizeFull();

    // Replicate a menu bar and add to layout
    final MenuBar menuBar = new MenuBar();
    menuBar.addItem("Menu");
    menuBar.addThemeVariants(MenuBarVariant.LUMO_SMALL, MenuBarVariant.LUMO_TERTIARY);
    add(menuBar);

    final VerticalLayout layout = new VerticalLayout();
    layout.setId("InnerLayout");
    layout.setSizeFull();
    // Replicate a screen where components overflow the vertical height.
    for (int i = 1; i <= 39; i++) {
        final Button testButton = new Button("Button " + i);
        layout.add(testButton);
    }

    // Add a scroller for the internal layout.
    final Scroller scroller = new Scroller(layout);
    scroller.setScrollDirection(Scroller.ScrollDirection.VERTICAL);
    scroller.getStyle().set("border", "1px solid var(--lumo-contrast-20pct)");
    scroller.setSizeFull();

    // Add a main layout to include both scrolled layout and close button
    final VerticalLayout outerLayout = new VerticalLayout();
    outerLayout.setId("OuterLayout");
    outerLayout.setSizeFull();
    outerLayout.getStyle().set("border", "1px solid var(--lumo-contrast-30pct)");
    outerLayout.add(scroller);

    // Add a close bottom to show layout at bottom when scrolling.
    final Button closeButton = new Button("Close");
    closeButton.addThemeVariants(ButtonVariant.LUMO_PRIMARY, ButtonVariant.LUMO_SMALL);
    outerLayout.add(closeButton);
    // Make button display bottom right
    outerLayout.setHorizontalComponentAlignment(Alignment.END, closeButton);
    outerLayout.setJustifyContentMode(JustifyContentMode.END);

    add(outerLayout);
}

}`

Instead of child.setSizeFull() use layout.expand(child) to make a child component take all available space inside a parent layout. “Full size” means the exact same height as the parent, so if there are other components taking space, then you get a combined height for the children that is larger than the parent’s height.

Thanks for that. And guessing addAndExpand(child) is a shortcut to do both?

Correct