IE嵌套CSS表中{100}高度失败

Question

我有一个包含多个嵌套CSS表的页面布局。所有这些表都有100％的高度。只要浏览器窗口足够高以适应所有而不滚动，所有表都具有正确的高度。当浏览器窗口太小而无法适应内容的高度时，最里面的表会在高度上折叠，并忽略100％的高度。这种情况发生在IE 11中。所有其他浏览器都设法使其正确，包括Edge。

我尝试过不同的CSS规则，特别是为所有父元素添加explcit 100％高度。我还尝试为表格行添加所有div。

JSFiddle：https://jsfiddle.net/181d0qu1/1/

要重现错误，请使用IE并降低窗口高度，直到出现垂直滚动条。

＆＃13;

＆＃13;

html, body {
    height: 100%;
    margin: 0;
}
.table {
    display: table;
    height: 100%;
    background: #9A9A9A;
}
.row {
    display: table-row;
}
.cell {
    display: table-cell;
    vertical-align: top;
}
#spacer {
    height: 400px; 
    background-color: silver;
}
#right > div {
    background-color: rgb(194, 206, 214);
}
#top > div {
    height: auto;
    background: #EECCCC;
}
#bottom > div {
    height: 1px;
    background: #EECCEE;
}

＆＃13;

<div id="container" class="table">
    <div class="cell">
        <div id="intermediate" class="table">
            <div class="cell">
                <div id="spacer">spacer</div>
            </div>
            <div class="cell">
                <div id="right" class="table">
                    <div id="top" class="row">
                        <div class="cell">top</div>
                    </div> 
                    <div id="bottom" class="row">
                        <div class="cell">bottom</div>
                    </div> 
                </div>
            </div>
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

以下是显示IE中行为的屏幕截图（当窗口左侧足够高，右侧调整大小的窗口时正确）：

有没有办法让IE将最里面的表保持在100％高度而不会遗漏任何嵌套元素？