How to I get the scrollbar on the VerticalLayout rather than the HorizontalLayout in Vaadin Flow

Question

This is using the Vaadin starter project Hello World example. In essence I want to have the scrollbar in the VerticalLayout on the left rather than on the whole page as shown in the image below:

However no matter what I do the scrollbar always appears on the right side. I suspect this may have to do with the AppLayout but I'm not sure how to adjust it so that the scrollbar is on the VerticalLayout shown in the diagram below.

The code is as follows:

add(getHelloVerticalLayout(), new HorizontalLayout(new Button("Simple")));

Where getHelloVerticalLayout() consists of just a bunch of Hello buttons so that it's large enough to generate a scrollbar on the webpage.

private VerticalLayout getHelloVerticalLayout() {
    List<Button> buttons = new ArrayList<>();
    for(int x=0; x<=50; x++)
        buttons.add(new Button("Hello"));
    return new VerticalLayout(buttons.toArray(Button[]::new));
}

Answer 1

You can wrap your layout, which needs a scrollbar, with the Scroller component. See the official docs for more information and example https://vaadin.com/docs/latest/ds/components/scroller