How to flexible style for container
Application Type
Traditional Web
Service Studio Version
11.10.4 (Build 36716)

I have 2 containers.

The one on the right contains a table so the height will vary with different amounts of data.

I want the container on the left to have a height that will automatically change to equal the height of the container on the right.

Please help me how to customize the flexible style of the container, I tried the javascript for the style at extend properties but failed.


Rank: #292

Hi Thanh Ta,

Put your both these two containers inside a common container and add following style to the parent container.


Hope it works!! Thanks :)

Rank: #76

Hi Thanh Ta,

For the mentioned use-case, you can refer the pre-defined CSS class like display-flex, flex1, flex2... without defining your own custom css rules as shown below

See this sample app | Flex Container

Hope this helps you!

Kind regards,

Benjith Sam

Rank: #70

Hi Thanh,

You set a container involving the two side-by-side containers and give it a class two-divs-full-height-division and add the following CSS:



    display: -ms-flex;

    display: -webkit-flex;

    display: flex;


.two-divs-full-height-division > div {



This will force the containers to have the same size and it will grow according to the size of the largest container. Your Widget Tree would look like this:

Hope it helps.


Rank: #138

Hi Thanh,

Using "display: flex" on the parent container should be enough to make both children have the same height:

The problem you're facing might be caused by the HTML structure you're defining, which to me seems to be over complicated for what you want to achieve. Check a working version in the attached OML or try the following:

1) Remove the Content\Section blocks

2) Remove all unnecessary inline CSS such as fixed heights

3) Apply a background color to the direct children of the flex container