子组件宽度超过父

Question

我有一个基于CssLayout的视图，它具有预定义的最小宽度，但可以扩展为填满整个屏幕。这个视图，我们将调用父视图，在列表视图中具有子视图。每个子节点都是扩展Horizo​​ntalLayout的同一个类的实例。

我在布局方面遇到了一些问题。

首先，由于封装VerticalLayout，每个孩子都有一定比例的空间而不是允许他们根据他们的高度适当地放置空间，因此孩子们彼此重叠。 VerticalLayout是必需的，因为当列表大于父级时我需要父级滚动。

其次，孩子们没有调整宽度以匹配父母。我的修复尝试导致孩子太宽，需要水平滚动，或者孩子的宽度不如父母，并且有额外的空间。

如图所示，前两名儿童可以在右侧留出额外空间。第三个孩子溢出父宽度导致水平滚动。

如何使用Vaadin或CSS修复这两个问题？

Answer 1

经过进一步测试后，我可以通过切换list child和list parent来使用CssLayout并在填充其内容后设置Height或Width来接近所需的效果。