Max-height relative to parent doesn't work

Question

I'm trying to put a lot of content in "Thickbox" (Javascript popup window) and it works almost fine but I can't make max-height: 100%; (relative to parent) and overflow-y: scroll; work.

There are two outcomes:

1. It is as long as it should be, without vertical scroll and it goes outside the box (far too much).
2. It is as long as it should be, with vertical scroll and it goes outside the box (a little bit).

I just want to have it inside the box, with vertical scroll and I don't want it to go outside the box. Once you'll take a look at JSFiddle you'll know what I mean: http://jsfiddle.net/m4aKk/ (best viewed on large screen - 1600px+). Any advices would be great!

Why height: 100%; or max-height: 100%; aren't relative to its parent?

Answer 1

A solution is to make the inner box position absolute. Something like this:

#TB_ajaxContent {
    width: 440px;
    overflow-x: hidden;
    position: absolute;
    top: 30px;
    bottom: 10px;
}

This should make the inner div position the way you like it. Here's the updated fiddle - note I've removed height:auto; height:100% from the inlined style.

This is quite a common trick to get the inner div to 'be as tall as the parent'.

Answer 2

replace this line in your code:

<div id="TB_window" style="width: 470px; height: 100%; margin-left: -335px; top: 48px; margin-top: 0px; visibility: visible;">  

just change height: 314px; to height: 100%; !!!