Relative sized container inside relative sized container, and so on... (css)

Disclaimer: I don't have any formal programming background, and I've been trying to mess with front-end design recently. Excuse me if my questions are trivial or misplaced (at least I didn't find clear answers in other posts)

I've been using Outsystems with responsive design framework to develop a web page. In order to profit from the responsive framerwork, I'm trying to make a web block that will look something like this.



Inside a container with defined dimensions, I would insert a container (which will fit perfectly this parent container), containing other containers of its own. These 3 containers will always fill the parent horizontally, but will have heights according to the proportions I draw there (merely illustrative).

In order to fill the fixed-size parent, the main container would have to be set with height and width equal to 100% (at least I think so). However, the last child container (60%) may have its contents bigger than the appointed size (I put search results in there), so I tried setting 'overflow-y: auto'. However, that doesn't seem to work. From what I understood, that doesn't work because its parent has its height set to 100%, which isn't a defined size, so it ends up being considered as an undefined size when calculating the child containers size, and it ends up setting its height to 'auto' by default, which leads to visible overflow. I ended up changing the first two containers to have fixed sizes at the end (since they're inputs and they need to be at least visible for typing), however I just can't manage to make the last one fill the rest of the parent's container, while creating a scroll when necessary if its content overflow. What works is setting the parent container with 'overflow-y: auto', but I don't want it to work like this.

Is it possible to set chains of relative sized elements within another with .css or does it need to be alternated between fixed-size/relative-size to work? Would I need to use javascript to make calculations and set their heights at runtime?

Hi Bruno.

I think you have the answer in your image.

20%+20%+60% is in fact 100%. But you have margins between around the elements. Even if they are only 5px, that will be a total of 30px in total and cut the final block.

If there are no visible borders, you can replace margin be padding that will be the same visually and be included in the 20%. if you have borders then yes, you have to do some math.

Nuno Reis wrote:

Hi Bruno.

I think you have the answer in your image.

20%+20%+60% is in fact 100%. But you have margins between around the elements. Even if they are only 5px, that will be a total of 30px in total and cut the final block.

If there are no visible borders, you can replace margin be padding that will be the same visually and be included in the 20%. if you have borders then yes, you have to do some math.

Hi Nuno... maybe I didn't represent accurately what my issue is. Those proportions there are illustrative, so you can consider margins, borders, etc, are already considered in those percentages. 

The overflow doesn't happen in a first moment, since the first two child elements are single line input blocks. At first, there's only a blank space on the bottom. The overflow happens when I use a search API, which put the results inside the third (bottom) child - a list is returned which is ordered with two image elements per row (usually 8 rows). As its parent container (the one set with 'fill' for height and width) doesn't have a numerically defined size, I believe that the third container doesn't consider that it has a 'height' or 'max-height', or simply doesn't assume that when rendering the results, due to the absolute-relative situation I mentioned.

Currently, I'm setting the first two child containers with 'height: 40px', to simplify things. Outsystems then assumes a height for the third one during development equal to the space left in the parent container (it assumes as an 'auto', I suppose). I still can't make this third container understand that, after loading the results, the overflow can't overlap the parent container, and it needs to be hidden and a scroll has to be added to the side.


Here's how the page loads at first. The input box and the button represent the first two child containers. The remaining space is the third one, which ends up overflowing after the results are loaded.


Solution

Ok, I posted this on Stack Overflow and got a solution for the problem.

I set the parent container as 'display: flex' and 'flex-direction: column'.

I set the third child with 'overflow-y: scroll' and it worked.

Solution

Ok.

CSS is not my field, but I like to give it some tries.

You have your 3 containers of 20, 20 60. The third with overflow-y: auto;

Inside the 3rd place a forth one and there place the search.

And here goes the creative me that doen't know CSS:

If it doesn't work, configure the third to have position: absolute; and top:40%;

That will place it where you want it.