文字长度+表格单元格+百分比高度 - 这里发生了什么？

Question

我有一个使用display: table-cell的div display: table-cell包含一个子div ...都使用基于百分比的维度。 当该子div包含超过一定数量的文本（取决于字体大小）时，它将忽略其高度规则。

这是一个孤立的测试用例

单击“切换文本”按钮将演示此问题。 它在Chrome和Safari中更为明显，但Firefox也出现了这个问题。

我希望.child div的高度为40px ......但它大约是290px（在Chrome和Safari中）。 同样， .table的高度应为240px。

HTML：

<div class="main">
    <div class="item">
        <div class="table">
            <div class="table-cell">
                <div class="child">
                    <div class="child-inner">
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada magna, Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS：

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.main {
    position: relative;
    margin: 20px;
    width: 320px;
    height: 480px;
}

.item {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #eee;
    overflow: hidden;
}

.table {
    display: table;
    position: absolute;
    top: 2.083333333333333%;
    left: 50%;
    height: 50%;
    width: 50%;
}

.table-cell {
    position: relative;
    display: table-cell;
    height: 100%;
    width: 100%;
    vertical-align: middle;
}

.child {
    position: relative;
    overflow: hidden;
    left: 0%;
    height: 16.666666666%;
    width: 93.75%;
    background-color: rgba(255, 255, 255, 0.5);
}

.child-inner {
    height: 100%;
    width: 100%;
    padding: 10px;
    overflow: hidden;
    overflow-y: auto;
}

p {
    margin: 0;
    padding: 0;
}

Answer 1

我尝试将生长元素包装在使用绝对定位的div中，它似乎具有您要求的效果： http ： //jsfiddle.net/fschwiet/2RgPV/ 。 查看已添加的“fixme”div。 我们的想法是，无论表格逻辑在外面生成什么，它都会密封其中发生的任何事情。

.fixme {
    position:absolute;
    top:0px;
    bottom:0px;
    right:0px;
    left:0px;
    overflow:hidden;
}

Answer 2

似乎.child-inner上的填充有不利影响。 我删除了填充物，它现在尊重高度。 http://jsfiddle.net/cwardzala/Z27S9/1/

.child-inner {
    height: 100%;
    width: 100%;
    /* padding: 10px; */
    overflow: hidden;
    overflow-y: auto;
}