Il bambino è più grande del genitore con altezza massima. Overflow non ha effetto

Question

Voglio avere un elemento genitore che ha un'altezza massima e un elemento figlio che riempie questo elemento genitore. Se il contenuto del bambino sta superando il genitore dovrebbe apparire una barra di scorrimento. Ho cercato di risolvere in questo modo:

HTML:

<div class="parent"> 
    <div class="child"> 
     <div class="some-content"> 
     abcde<br>abcde<br>abcde<br>abcde<br>abcde<br> 
     abcde<br>abcde<br>abcde<br>abcde<br>abcde<br> 
     abcde<br>abcde<br>abcde<br>abcde<br>abcde<br> 
     abcde<br>abcde<br>abcde<br>abcde<br>abcde<br> 
     abcde<br>abcde<br>abcde<br>abcde<br>abcde<br> 
     </div> 
    </div> 
</div> 

CSS:

div.parent { 
    max-height: 50px; 
    width: 100px; 

    border: 1px solid black; 
} 

div.child { 
    height: 100%; 

    overflow-y: auto; 
} 

Purtroppo questo non funziona come previsto. Il bambino cresce sopra il genitore.

Si prega di rispettare, quell'impostazione overflow-y: auto per il PARENT NON è un'opzione, in quanto si sospetta di contenere altri elementi che non dovrebbero essere scrollati. Si sospetta che il bambino riempia lo spazio lasciato nel genitore. Guarda DEMO dal vivo per maggiori informazioni.

Live DEMO

Answer 1

Per quanto io sappia non c'è modo semplice per farlo con i CSS. In sostanza, stai chiedendo al browser di riempire lo spazio rimanente con l'elemento scorrevole. È possibile farlo con JavaScript (questo esempio utilizza jQuery perché sono pigro):

$('.parent').each(function(){ 
    $(this).children('.child').height($(this).height() - $(this).children('.sibling').height()+"px"); 
}); 

http://jsfiddle.net/BUxUe/13/

Answer 2

check this out Fiddle

div.parent { 
    max-height: 50px; 
    width: 100px; 

    border: 1px solid black; 
    overflow:scroll; 
} 

div.child { 
    height: 100%; 
} 

Answer 3

Si può cercare di usare Flexbox.

div.parent { 
    max-height: 300px; 
    width: 200px; 
    border: 1px solid black; 
    display: flex; 
    flex-direction: column; 
} 
div.sibling { 
    border: 1px solid red; 
    flex: 0 0 auto; 
} 
div.child { 
    overflow-y: auto; 
    border: 1px solid blue; 
    flex: 0 1 auto; 
} 

Non sono sicuro, se questo è un tipo di hack. Ma sembra risolvere questo problema.