Make inner div grow in height when outer div grows

Question

I have two divs inside a parent div (see image below). When the "black" div grows in height, so does the outer "red" div, but I want to make the "green" div to grow as well. How can this be done in css?

Answer 1

You can use the CSS properties table, table-row, and table-cell. You may need to check if its supported in browsers your targeting though. http://www.quirksmode.org/css/display.html#table

Example: http://jsfiddle.net/2GawC/