Nested VerticalLayout inside scrollable HorizontalLayout does not grow

Flow
1

Hello, i have the following requirement:

I want to have a 3 column layout, where the columns might contain a different amount of components.
All columns should have the length of the longest column in the end, even if containing fewer items.
The columns will have a given background color.
The container wrapping the columns should be scrollable to allow to scroll down the columns.

First aproach:
Nesting VerticalLayouts inside a HorizontalLayout.
Add overflow-y to the HorizontalLayout.

Example (using only 1 column):

@Theme(value = Lumo.class, variant = Lumo.DARK)
@HtmlImport("frontend://styles/shared-styles.html")
@Route
@PWA(name = "Project Base for Vaadin Flow with Spring", shortName = "Project Base")
public class Main extends HorizontalLayout {

  public Main() {
    setSizeFull();
    getElement().getStyle().set("overflow-y", "auto");

    VerticalLayout layout = new VerticalLayout();
    layout.getStyle().set("background", "var(--lumo-shade-10pct)");
    add(layout);

    IntStream.rangeClosed(0, 100).forEach(i -> layout.add(new H1(String.valueOf(i))));
  }
}

Result:

![Result]
(https://vaadin.com/attachment/9c3ba02d-3af7-45f9-9f0a-10a4e4b707da/Capture.PNG)

As you can see, the nested VerticalLayout does not grow with its content causing the background to be cut off.
Is this the wrong approach or what is wrong here?

17430125.png

2

Hello Julien,

I think this code could solve your problem. There is attached one image attached that shows how it is like:

public class MainView extends HorizontalLayout {

    public MainView() {
        setSizeFull();

        VerticalLayout column1 = new VerticalLayout();
        VerticalLayout column2 = new VerticalLayout();
        VerticalLayout column3 = new VerticalLayout();

        column1.getStyle().set("background", "red").set("overflow-y","auto");
        column2.getStyle().set("background", "yellow").set("overflow-y","auto");
        column3.getStyle().set("background", "green").set("overflow-y","auto");

        add(column1,column2, column3);

        IntStream.rangeClosed(0, 2).forEach(i -> column1.add(new H1(String.valueOf(i))));
        IntStream.rangeClosed(0, 4).forEach(i -> column2.add(new H1(String.valueOf(i))));
        IntStream.rangeClosed(0, 100).forEach(i -> column3.add(new H1(String.valueOf(i))));
    }

}

17433748.png