CSS Overflow problems with fixed position divs

Question

So this problem has come up and been solved probably 1000 times by now (Scroll part of content in fixed position container, child div height 100% inside position: fixed div + overflow auto) but I can't seem to get my CSS to behave.

I am trying to create a popup div that has a scroll-able interior. I have a dark grey div that should cover the entire window and centered in the window should be a greenish div. The inner div needs to have a margin and be sized to fit it's content, unless the content is too big and then it needs a scroll bar.

I can't get the scrolling to work. I've tried specifying max width/height but those seem to get ignored.

HTML:

<div class='PopupPanelBG'>
    <div class='PopupPanel'>
        <div>
            <div style='width: 1000px;'>some stuff that is really big</div>
        </div>
    </div>
</div

CSS:

.PopupPanelBG {
    display: table;
    background: rgba(0, 0, 0, 0.7);
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    overflow: hidden;
}

.PopupPanel {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.PopupPanel>div {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    opacity: 0.9;
    background-color: #e1efbb;
    border: 1px solid gray;
    padding: 8px;
    margin: 30px;
    overflow : auto;
}

http://jsfiddle.net/QbmdK/

Answer 1

So... This works (with percents).

http://jsfiddle.net/Agony/QbmdK/34/

(Now with vertical alignment!)

The thing you want to note is that the wrapping div has a set max-width:50% while the innerdiv has a max-width:100%. That will hold true for any amount of data.