Длина текста + таблица-ячейка + процентная высота - что здесь происходит?

Question

У меня есть div, использующий display: table-cell, который содержит дочерний div ... оба используют процентные размеры. Когда этот дочерний div содержит больше определенного количества текста (в зависимости от размера шрифта), он игнорирует его правило высоты.

Here's an isolated test-case

При нажатии на кнопку "тумблер текст" продемонстрирует проблему. Его более выраженный в Chrome & Safari, но Firefox также демонстрирует проблему.

Я бы ожидал, что высота дед .child будет 40px ... но вместо этого это примерно 290px (в Chrome & Safari). Аналогично, .table должен иметь высоту 240 пикселей.

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», который был добавлен. Идея заключается в том, что 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; 
}