子组件宽度超过父组件宽度

Question

我有一个基于CssLayout的视图，它有一个预定义的最小宽度，但可以扩展以填充整个屏幕。这个视图，我们称之为父视图，在列表视图中有子视图。每个子级都是扩展HorizontalLayout的同一类的实例。

我有几个布局问题。

首先，由于封装垂直布局为每个孩子提供了一定百分比的空间，而不是允许他们根据自己的高度适当地分配空间，因此孩子们彼此重叠。VerticalLayout是必需的，因为当列表大于父列表时，我需要父列表滚动。

其次，孩子们没有调整宽度以匹配父母。我试图修复的结果要么是子对象太宽，需要水平滚动，要么是子对象的宽度小于父对象，并且有额外的空间。

如图所示，最上面的两个孩子在右边留出了额外的空间。第三个子项溢出父项宽度，导致水平滚动。

如何使用Vaadin或CSS解决这两个问题？

Answer 1

在进一步测试之后，我能够通过切换列表子级和列表父级来使用CssLayout，并在填充其内容后设置高度或宽度，从而接近所需的效果。