The absolute layout of the element, which will overflow, but is limited only on three sides

I need to archive the layout, where the div, which is the scroll container, is absolutely located on three sides (left, right and bottom), but it dynamically stacks with it. Both the scroll container and sibling are in a container with a fixed size. I made jsfiddle which demonstrates my problem.

http://jsfiddle.net/HKu4j/4

If you follow the click instructions, you will see that when you click on the top container after clicking on the second container, it will resize, which ideally will push the top of the div.myscroll down. This does not happen because div.myscroll has a top set of up to 20 pixels; Is there a way with the new flexible CSS3 layouts to make this work? I am looking for a solution that uses CSS, rather than setting geometry dimensions explicitly using javascipt, as it was in the past.