How to avoid content from a child div overflowing the parent container? This is probably one of the most frequent question ever asked and the most frequent and a working solution is to use `max-height:100%`, which ofcourse works.

The problem is when I cannot use `100%`, for example, in the **given jsfiddle**, I have an header which takes some `x pixel` height. I can of course arbitrarily decrease the percentage but it is unstable when the window is resized.

[JSFiddle - FUpsA](http://jsfiddle.net/FUpsA/)

**Edit:**
I like to mention that the Header should not be a part of the scrolling content, hence using `overflow:auto` on the parent div is not an option.