Długość tekstu + komórka tabeli + wysokość procentowa - co tu się dzieje?

Question

Mam div przy użyciu display: table-cell, który zawiera div child ... oba wykorzystują wymiary oparte na wartości procentowej. Kiedy ten element div zawiera więcej niż określoną ilość tekstu (w zależności od rozmiaru czcionki), ignoruje regułę wysokości.

Here's an isolated test-case

Kliknięcie przycisku "przełącz tekst" zademonstruje problem. Jest bardziej wyraźny w przeglądarce Chrome, ale Firefox również wykazuje ten problem.

Spodziewam się, że wysokość div div wynosząca .child to 40px ... ale zamiast tego ma ona około 290px (w przeglądarce Chrome & Safari). Podobnie, .table powinna mieć wysokość 240 pikseli.

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

Próbowałem owijania rosnące element div, który jest przy użyciu pozycjonowania bezwzględnego, to wydawało się, że efekt Prosisz o: http://jsfiddle.net/fschwiet/2RgPV/ . Zobacz "div" fixme, który został dodany. Chodzi o to, że fixme div pieczętuje wszystko, co się w nim dzieje, z jakiejkolwiek logiki stojącej na zewnątrz.

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

Answer 2

Wygląda na to, że wyściółka na .child-inner ma negatywny wpływ. Usunąłem wyściółkę i teraz szanuje wysokość. http://jsfiddle.net/cwardzala/Z27S9/1/

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