子組件寬度超過父項

Question

我有一個基於CssLayout的視圖，該視圖具有預定義的最小寬度，但可以展開以填充整個屏幕。這個視圖，我們稱之爲父視圖，在列表視圖中有子視圖。每個孩子都是擴展Horizo​​ntalLayout的同一個類的一個實例。

我有幾個佈局問題。

首先，由於封裝VerticalLayout給每個孩子一個空間的百分比，而不是允許他們根據他們的身高適當地確定空間，所以孩子們彼此重疊。 VerticalLayout是必需的，因爲當列表大於父級時，我需要父級滾動。

其次，孩子們沒有調整寬度來匹配父母。我試圖修復結果，要麼是孩子太寬，需要水平滾動，要麼是孩子的父母不夠寬，並且有額外的空間。

正如圖所示，頂部的兩個孩子都允許額外空間的權利。第三個子項溢出導致水平滾動的父寬度。

如何使用Vaadin或CSS修復這兩個問題？

Answer 1

進一步測試後，我可以通過切換列表子和列表父項以使用CssLayout並在填充其內容後設置高度或寬度，從而接近所需的效果。