Child is larger than parent with max-height. Overflow has no effect

Question

I want to have a parent element which has a maximum height and a child element which fills this parent element. If the contents of the child are exceeding the parent a scrollbar should appear. I tried to solve it like this:

div.parent {
  max-height: 50px;
  width: 100px;
  border: 1px solid black;
}

div.child {
  height: 100%;
  overflow-y: auto;
}

<div class="parent">
  <div class="child">
    <div class="some-content">
      abcde<br>abcde<br>abcde<br>abcde<br>abcde<br> abcde
      <br>abcde<br>abcde<br>abcde<br>abcde<br> abcde
      <br>abcde<br>abcde<br>abcde<br>abcde<br> abcde
      <br>abcde<br>abcde<br>abcde<br>abcde<br> abcde
      <br>abcde<br>abcde<br>abcde<br>abcde<br>
    </div>
  </div>
</div>

Unfortunately this does not work as expected. The child grows over the parent.

Please respect, that setting overflow-y: auto to the PARENT is NOT an option, as it is suspected to hold other items that should not be scrolled. The child is suspected to fill the space that is left in the parent. See live DEMO for more information.

Live DEMO

Answer 1

As far as i'm aware there is no easy way to do this with CSS. Essentially you're asking the browser to fill the remaining space with the scrollable element. You can do this with JavaScript (this example uses jQuery because I'm lazy):

$('.parent').each(function(){
    $(this).children('.child').height($(this).height() - $(this).children('.sibling').height()+"px");
});

http://jsfiddle.net/BUxUe/13/