css - CSS Table子级无法在Firefox中扩展

我在基本的CSS表格布局中遇到了一些问题。我的两个测试用例是Chrome和Firefox。
尽管Chrome可以按预期显示页面，但Firefox的子级（例如“内部”）div的高度为100％不会占用所有父级的高度。

我已经简化了版式，并且欢迎大家提出有关总体问题的建议，但我想指出，我宁可不要（A）删除“内部” div，因为它是必不可少的，或者（B ）更改任何对表布局造成不利影响的表div（如果没有“内部” div）。

的HTML：

<div class="div">
    <div class="div2">
        <div class="div3">
            <div class="inner">
                test
                <div class="inner-bottom">
                    test2
                </div>
            </div>
        </div>
    </div>
</div>

CSS：

.div { display: table; height: 400px; border: 4px solid #000; width: 300px;}
.div2 { display: table-row; height:auto;}
.div3 { display: table-cell; height:auto; border: 4px solid #f00; }
.inner { height: 100%; border: 4px solid #00f; background-color: #aaf;}
.inner-bottom { background-color:#777; }

Firefox中的屏幕截图：https://mobsoc.co.uk/img/example-csstable-firefox.png
Chrome中的屏幕截图：https://mobsoc.co.uk/img/example-csstable-chrome.png

您可能会从图像中注意到，Chrome会用浅蓝色背景色正确填充可用高度，而Firefox不会。

提前致谢 ：）

最佳答案

.div2 { display: table-row; height:inherit;}
.div3 { display: table-cell; height:inherit; border: 4px solid #f00;}

更改div2和div3的高度，以从父级继承到子级再继承子级。

关于css - CSS Table子级无法在Firefox中扩展，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20388581/