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

Question

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

这是一个孤立的测试用例

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

我希望.childdiv的高度为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 div 可以将其中发生的任何事情与外部的表逻辑隔离开来。

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