Scrollbar inside fixed 100% div without Javascript

Question

Ok, so I have a fixed div over on the right side of the screen that is the height of the window. When content exceeds the space of the div, I want the div to overflow with a scrollbar.

I have managed to do this in Chrome, but it doesn't work in Firefox.

SSCCE

HTML:

<div id="outer">
    <div id="middle">
        <div id="inner">
        </div>    
    </div>
</div>

CSS:

div#outer{
    position    : fixed;
    top         : 0;
    right       : 0;
    display     : table;
    z-index     : 200;
    width       : 320px;
    height      : 100%;
}

div#middle {
    display     : table-cell !important;
    max-width   : 300px;
max-height  : 100%;
}

div#inner {
    overflow-y: auto;
    height: 100%;
}

Why doesn't it work? What can I do to fix it?

I realize I could bind event to window re-sizing and force set the div height based on that, but I would much prefer a CSS solution.

Answer 1

Make the container with the overflow:auto; absolute. http://jsfiddle.net/NicoO/49SY8/

body, html
{
    margin:0;
    padding:0;
    height:100%;
}

div#outer{
    position    : fixed;
    top         : 0;
    right       : 0;
    z-index     : 200;
    width       : 320px;
    height      : 100%;
}

div#middle {
    max-width   : 300px;
}

div#inner {
    overflow: auto;
    position: absolute;
    bottom:0;
    left:0;
    right:0;
    top:0;
}