css - 最大高さのスクロール可能なコンテンツを含む可変高ダイアログ

Question

高さが可変の垂直方向に中央揃えのダイアログを作成しようとしています。height: 100%コンテナ内およびコンテナ内でスパン要素を使用する手法を使用してvertical-align:middleいます。

これで、ダイアログ ボックスにmax-height:80%セットが追加され、コンテナーが小さくなった場合にコンテナーの高さ全体を占有しないようになりました。コンテナが小さくなると、コンテンツも小さくなりますが、これが発生するとコンテンツ領域をスクロール可能にすることができません..

これは、フィドルの簡略化されたバージョンです。

HTML:

<div id="main">
    <div id="overlay">
        <span id="mickey-mouse"></span>
        <div id="overlay-inner">
            <div id="overlay-title">Title</div>
            <div id="overlay-content">
                <div id="content">MAKE ME SCROLL!</div>
            </div>
        </div>
    </div>
</div>

CSS:

body, html {
    position: relative;
    width: 100%;
    height: 100%;
    position: relative;
    background: yellow;
    padding: 0;
    margin: 0;
}

#main {
    position: absolute;
    width: 100%;
    height: 100%;    
    top: 0;
    left: 0;
}

#overlay {
    position: aboslute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    text-align: center;
}

#mickey-mouse {
    display: inline-block;
    height: 100%;
    width: 0;
    margin-right: -0.25em;
    vertical-align: middle;
}

#overlay-inner {
    text-align: left;
    display: inline-block;
    vertical-align: middle;
    max-height: 80%;
    max-width: 300px;
    width: 80%;
    background: white;
    overflow: hidden;
}

#overlay-title {
    padding: 1em;
    height: 14px;
    background: #eee;
}

#overlay-content {
    padding: 1em;
    /* HOW TO MAKE THIS SCROLLABLE? */
}