我有一个Vaadin 8应用程序，有几个视图。

public class ViewName extends Panel implements View {

面板中有一个垂直布局作为主布局。

public ViewName() {
    setSizeFull();
    VerticalLayout mainLayout = new VerticalLayout();
    setContent(mainLayout);

然后我有许多不同的布局（HorizontalLayout、GridLayout）或标签等组件作为组件添加到主布局中。对于HorizontalLayout，我经常执行以下操作以使用屏幕的全宽度：

hLayout.setWidth("100%");

我有很多图标，网格等。只要我不调整窗口大小，一切都没问题。当我把窗口调整到一个小尺寸时，我看到一片混乱(图标，文本等等。在彼此之上)并且没有水平滚动条。(但是，网格有水平滚动条。)我尝试了很多方法来解决这个问题。如果我加上

mainLayout.setSizeFull();

或

mainLayout.setWidth("100%");

我已经在大屏幕上弄得一团糟了。我还尝试了 mainLayout 的 CSS，如此处所述。我得到了几个滚动条，但没有一个用于窗口本身！

唯一正确调整大小的组件是添加到mainLayout的标签，例如：

Label title = new Label("Some text",ContentMode.HTML);
    title.setWidth(100, Unit.PERCENTAGE);
    mainLayout.addComponent(title);
    mainLayout.setComponentAlignment(title, Alignment.MIDDLE_CENTER);

我还注意到，GridLayout中的任何内容在调整大小后似乎都保持不变，但却不可见，因为我没有滚动条。然而，水平布局中的图标相互重叠。

怎么了？请，我需要关于我应该使用哪种布局作为视图面板的主布局、如何调整组件大小以及如何在必要时为主窗口获取一个水平滚动条的一般说明。