100% height components

Here, we talk about the Flex Container component.

Let's say you need two components to occupy the whole space of the page - one should be 70% wide and the other 30%. In this article, we'll show how you can achieve this using a Flex Container.

Inside the Flex Container, we've already placed a Table and a Form and set their width. Now, follow the instruction below to configure the height:

1. First, make sure the Expand content to fit checkbox is selected in page settings in the right side panel.

2. Add the full-height class to the Flex Container's Styling section.

3. Now, customize its style in the Custom code tab:

<style>
.full-height > ub-grid > ub-dropzone > .flex,
.full-height > ub-grid > ub-dropzone > .flex > ub-grid-item {
  height: 100% !important;
}
</style>

As simple as that! Now, your container's layout will take up 100% height.

In case you have a component with a set width (for example, 500px) and you want the other component to occupy the rest of the space, even on growing, you can also configure 100% height for them. You just need to set the Grow setting value to "1" in the Flex section for the component that should grow.