How to make child component follow parent size?

Parent layout size is set to 100vw and 100vh respectively. How can I make my children components width to follow parent’s?

Most components should have setWidth(...) and setHeight(...) methods. If a component doesn’t have those you can use getElement().getStyle().setProperty("width", ...).

When using relative sizes (percentages), make sure that the whole element/component hierarchy has a defined size.

Jouni Koivuviita:
Most components should have setWidth(...) and setHeight(...) methods. If a component doesn’t have those you can use getElement().getStyle().setProperty("width", ...).

When using relative sizes (percentages), make sure that the whole element/component hierarchy has a defined size.

Hi Jouni, thanks for the response. Sorry I should have given a more in-depth description of what I was trying to achieve.

[In this article]
(https://vaadin.com/docs/v10/flow/migration/5-components.html) it states:

“Using setSizeFull(), setHeight(“100%”) or setWidth(“100%”) for any contained component will not have the same effect as before - it will cause the component to get the full size of the parent layout, instead of full size of the slot.”

Is there an alternate method to this? I would like to have my content layout its own full size instead of inheriting the parent’s.

My content layout is put in a vertical layout next to my side-menu, and within a horizontal layout with a topmenu. See attached image for a sample.

17032887.jpg

Alright, thanks for the clarification!

You should use setFlexGrow(1) instead for the horizontal layout and the content area. It makes the child component occupy available extra space. No need to set width/height.