Dziecko jest większe niż rodzic z maksymalną wysokością. Przepełnienie nie ma żadnego efektu

Question

Chcę mieć element nadrzędny, który ma maksymalną wysokość i element potomny, który wypełnia ten element nadrzędny. Jeśli zawartość dziecka przekracza rodzic, powinien pojawić się pasek przewijania. Starałem się go rozwiązać tak:

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; 
} 

Niestety to nie działa zgodnie z oczekiwaniami. Dziecko rośnie nad rodzicem.

Proszę uszanować, że ustawienie overflow-y: auto dla PARENTA nie jest opcją, ponieważ podejrzewa się, że posiada inne przedmioty, które nie powinny być przewijane. Dziecko jest podejrzane o wypełnienie przestrzeni pozostawionej w rodzicu. Zobacz live DEMO, aby uzyskać więcej informacji.

Live DEMO

Answer 1

O ile mi wiadomo nie istnieje prosty sposób to zrobić z CSS. Zasadniczo prosisz przeglądarkę o wypełnienie pozostałego miejsca przewijanym elementem. Można to zrobić z JavaScript (w tym przykładzie używa jQuery bo jestem leniwy):

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

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

Answer 2

to sprawdzić Fiddle

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

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

div.child { 
    height: 100%; 
} 

Answer 3

można spróbować użyć schematu 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; 
} 

Nie jestem pewien, czy to rodzaj hackowania. Ale wydaje się, że rozwiązuje ten problem.