How can I make a VerticalLayout scrollable?

I have a Components which exists as a common layout for all my pages. The layout of this component is as follows (made using paint so please sorry :p):

Right arrows mean that this layout is a HorizontalLayout and down arrows VerticalLayout.

I’m really interested in making bodyContent layout SCROLLABLE. Within this layout I usually introduce lots of UI components (more layouts, text fields, forms, grids…) and sometimes components aren’t shown due to the lack of vertical space and the absence of vertical scroll. So is there any way to make bodyContent scrollable (using SCSS/CSS or any other way)?

Thanks in advance.

The basic pattern is to make the bodyContent a Panel (with full size), in which you put the VerticalLayout
or whatever
. To get vertical scrollbar, the VL must in such case have undefined height; the vertical scrollbar appears when the height of the VL overflows the Panel’s content area.

It’s also possible to enable scrollling in other components with “overflow: auto” in CSS,
as is done here
for the Embedded component.

And works like charm!

First of all, here are updated links: “or whatever” should be "
https://vaadin.com/docs/-/part/framework/layout/layout-panel.html#layout.panel.scrolling
". I cannot find a replacement link for “as is done here”, but the link I just gave has similar information.

In what cases does the advice in the first paragraph not entended to work? I ask because I have a VerticalLayout, which contains some stuff at top ( a field and a table, actually ), then a “bodyContent” type panel ( as you describe above ), and that does not work. I can give more information if you need it. Thanks.

Never mind, your first paragraph. I was checking the wrong URL ( same application, just different machine, older version ). Oops. But at least the links are updated :-).