Lunghezza del testo + cella della tabella + altezza percentuale: cosa sta succedendo qui?

Question

Ho un div utilizzando display: table-cell che contiene un div figlio ... entrambi utilizzano dimensioni basate su percentuale. Quando quel div figlio contiene più di una certa quantità di testo (a seconda della dimensione del carattere), ignora la sua regola di altezza.

Here's an isolated test-case

Facendo clic sul pulsante "Toggle testo" dimostrerà il problema. È più pronunciato in Chrome & Safari ma Firefox presenta anche il problema.

Mi aspetto che l'altezza del div .child div sia 40px ... ma invece è di circa 290px (in Chrome & Safari). Allo stesso modo, .table dovrebbe avere un'altezza di 240 px.

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

ho provato avvolgendo l'elemento che cresce in un div che utilizza il posizionamento assoluto, sembrava avere l'effetto che stai chiedendo: http://jsfiddle.net/fschwiet/2RgPV/ . Vedi il div "fixme" che è stato aggiunto. L'idea è che il fixme div tipo di sigilli qualsiasi cosa stia accadendo al suo interno da qualsiasi logica di tabella vive al di fuori.

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

Answer 2

Sembra che il riempimento su .child-inner stia avendo effetti negativi. Ho rimosso l'imbottitura e ora rispetta l'altezza. http://jsfiddle.net/cwardzala/Z27S9/1/

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