100% height of parent. All parent heights are dynamic?

Percentage heights are calculated from the parent element, pixel heights aren't. That means you would need to set height on each level ONLY if all of the heights need to be in percentage. You can set min-height on 2a2 with a pixel value, so it won't get any smaller than that, but it will able to expand beyond that value.

And then you set height: 100% on 2a2a . This will work because the parent element(2a2) has an absolute value in px. Edit: To make the 3 divs fill the rest of the container regardless of the content, you have to use the padding-bottom, margin-bottom trick.

Here's the codepen .

Just set the 2a2's position: relative and the 2a2a's position: absolute. You can then add top: 0; bottom: 0; and the 2a2a gets stretched to the full height of its parent.