Sometimes things are too obvious but don’t work the way we think.
This is the HTML I have; my requirement was
child1 height will be auto(based on the content) and
child2 will occupy the remaining height of the main-container.
First I thought this is easy and created the following styles
This produces a wrong result - if
child1 takes 100px I expected
child2 to be 400px, but the height was 500px.
There are many ways to fix this. One easy way is using
display:table-row. Here is fixed CSS
see this in action below