Expanded Details renders over layouts

Flow
1

Hello.

(TLDR: how to fit expanded Details in VerticalLayout so this layout shows a scrollbar?)

In my app I am trying to put two Details one above another but I am having an issue with layouts when they are expanded.
Below you can see a simple example (I have colored the borders of VerticalLayouts). There is one Details in blue VerticalLayout. It contains a simple two column Grid. Here everything looks okay.

Source code 
@Route
public class MainView extends VerticalLayout {

  public MainView() {
    setSizeFull();
    getStyle().set("border", "2px, solid red");

    VerticalLayout mainLayout = new VerticalLayout();
    mainLayout.getStyle().set("border", "2px, solid orange");
    mainLayout.setSizeFull();

    mainLayout.add(createPanel());

    add(mainLayout);
  }

  private VerticalLayout createPanel() {
    VerticalLayout layout = new VerticalLayout();
    layout.getStyle().set("border", "2px, solid blue");
    layout.setSizeFull();
    Details d1 = new Details("First detail");
    d1.setWidthFull();
    d1.add(createGrid());
    layout.add(d1);
    return layout;
  }

  private Grid<Integer> createGrid() {
      Grid<Integer> grid = new Grid<>();
      grid.addColumn(i -> i).setHeader("Integer");
      grid.addColumn(i -> i * 2).setHeader("Integer * 2");
      grid.setItems(1, 2, 3, 4, 5);
      return grid;
    }
}

image
image811×563 13.8 KB

But when I expand the Details it renders beyond every layout and there appears a scrollbar for the whole browser window.

image
image811×563 18 KB
image
image811×563 17.3 KB

My expected result would be that scrollbar appears for the blue layout and the Details is rendered inside its border so I have to scroll to see the rest of the component.

I have been struggling with this for a couple of hours now.
How to achieve this?

2

Layouts are not scroll containers, they just lay things out one way or another, and either overflow (the default) or clip the contents if it overflows. The page body, on the other hand, is a scroll container by default, thus scrollbars on the page itself.

You should use a Scroller where you want a scrollable area. Set its width and height to 100%, and then place the Details elements inside it, wrapped into e.g. a VerticalLayout (which should not have a defined height since we want it to grow to accommodate those details).

3

Try this.

Scroller scroller = new Scroller(d1);
scroller.setSizeFull();
scroller.setScrollDirection(Scroller.ScrollDirection.VERTICAL);
scroller.getStyle().set("scrollbar-width", "thin");
layout.add(scroller);
return layout;