html - 拡張可能なフォームは、IE で相対配置内の絶対位置とオーバーフローを使用して機能しません。

Question

私は、コンテナーのサイズに合わせて拡張できる必要がある電子メール ピッカー フォームに取り組んでいます。また、より多くのアドレスが選択されるにつれてサイズが大きくなる「to」セレクターにも対応する必要があります。Firefox と Chrome ではうまく機能するが、IE9 と IE10 では失敗するソリューションがあります。

これが私がやろうとしていることの実例です：

問題の核心は、「overflow-y:auto」が機能するには DIV が「position:absolute」である必要があり、それをフロー内に配置するには、「position:relative」である親が必要であるということです。サイジングを両方向に適切に伸ばすためにテーブルを使用していますが、テーブルを使用せずにこのストレッチを適切に行うことができる人にはボーナスポイント.

ここで問題を最小限の例に要約しました: http://jsfiddle.net/yh7YD/4/

HTMLは次のとおりです。

<div class="outer">
    <table border="1">
        <tr class="first-row">
            <td class="to-label">To:</td>
            <td class="input-wrapper">
                <textarea></textarea>
            </td>
        </tr>
        <tr class="results-row">
            <td colspan="2" class="results-wrapper">
                <div class="results">
                    <ul>
                        <li>one</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                    </ul>
                </div>
            </td>
        </tr>
    </table>
</div>

このCSSで：

.outer {
    position: absolute;
    top: 50px;
    left: 50px;
    right: 50px;
    bottom:50px;
}
.first-row {
    height:10px;
}
.results-wrapper {
    position:relative;
}
table {
    width: 100%;
    height:100%;
}
.results {
    position:absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow-y: scroll;
}