子组件宽度超过父项

Question

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

我有几个布局问题。

首先，由于封装VerticalLayout给每个孩子一个空间的百分比，而不是允许他们根据他们的身高适当地确定空间，所以孩子们彼此重叠。 VerticalLayout是必需的，因为当列表大于父级时，我需要父级滚动。

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

正如图所示，顶部的两个孩子都允许额外空间的权利。第三个子项溢出导致水平滚动的父宽度。

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

Answer 1

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