Vaadin 14 如何实现内容区自适应填充且超出时仅显示区域滚动条

双滚动条的问题来自两处布局配置错误，修改后即可实现仅内容区滚动的效果：

1. 去掉LayoutTest构造方法中layout.setHeight("100px")的配置，改为给该HorizontalLayout设置setSizeFull()，匹配外层expand分配的剩余空间规则
2. 在createContentArea方法初始化内容区根VerticalLayout后，增加setSizeFull()配置，让内容区正确占满父容器分配的全部空间

修改后的完整代码如下：

@Route
public class LayoutTest extends VerticalLayout {

    public LayoutTest() {
        setPadding(false);
        setSpacing(false);
        setSizeFull();
        setDefaultHorizontalComponentAlignment(Alignment.STRETCH);
 
        Div header = new Div(new H2("Title"));
        header.setHeight("4em");
        header.getStyle().set("flex-shrink", "0");

        Div leftMenu = createLeftMenu();
        VerticalLayout content = createContentArea();
        HorizontalLayout layout = new HorizontalLayout(leftMenu, content);
        layout.setPadding(false);
        layout.setSpacing(false);
        // 去掉固定高度，设置满高
        layout.setSizeFull();               
        layout.expand(content);
        expand(layout);
        add(header);
        add(layout);
    }

    private HorizontalLayout createTopMenu() {
        HorizontalLayout menu = new HorizontalLayout(new Button("Menu 1"), new Button("Menu 2"), new Button("Menu 3"));
        menu.setPadding(false);
        menu.getStyle().set("background", "#fafafa");
        return menu;
    }

    private Div createLeftMenu() {
        Div navigation = new Div();
        navigation.setText("Left menu");
        navigation.setWidth("20em");
        navigation.getStyle().set("background", "#fafafa");
        navigation.getStyle().set("flex-shrink", "0");
        return navigation;
    }

    private VerticalLayout createContentArea() {
        VerticalLayout layout = new VerticalLayout();
        // 新增满高配置
        layout.setSizeFull();
        layout.setDefaultHorizontalComponentAlignment(Alignment.STRETCH);
        layout.setPadding(false);

        layout.add(createTopMenu());
        H3 subtitle = new H3("Content");
        subtitle.getStyle().set("flex-shrink", "0");
        layout.add(subtitle);

        VerticalLayout content = createContent();
        Div scroller = new Div(content);
        scroller.getStyle().set("overflow", "auto");
        scroller.getStyle().set("border-style", "solid");
        layout.add(scroller);

        HorizontalLayout buttons = new HorizontalLayout(new Button("Button 1"), new Button("Button 2"), new Button("Button 3"));
        buttons.getStyle().set("flex-shrink", "0");
        layout.add(buttons);
        layout.expand(scroller);
        return layout;
    }

    private VerticalLayout createContent() {
        VerticalLayout content = new VerticalLayout();
        for (int i = 0; i < 100; ++i) {
            Div div = new Div(new Span("data" + i));
            div.setWidth("2000px");
            div.setHeight("20px");
            div.getStyle().set("background", "#cccccc");
            content.add(div);
        }
        return content;
    }
}

修改后布局会自动适配窗口大小，仅内容超出时在内容区显示滚动条，外层页面不会出现滚动条。

内容的提问来源于stack exchange，提问作者tanderson