Çocuk, maksimum yükseklikteki ebeveynden daha büyük. Taşma etkisi yoktur

Question

Maksimum bir boyuta ve bu ana elemanı dolduran bir alt öğeye sahip bir ana öğeye sahip olmak istiyorum. Çocuğun içeriği ebeveynleri geçiyorsa, bir kaydırma çubuğu görünmelidir. Ben böyle çözmeye çalıştı:

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: beklendiği gibi

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

    border: 1px solid black; 
} 

div.child { 
    height: 100%; 

    overflow-y: auto; 
} 

Ne yazık ki bu çalışmıyor. Çocuk ebeveyn üzerinde büyür.

Lütfen, PARENT'e taşma-y: auto ayarının, kaydırılmaması gereken diğer öğeleri tuttuğu şüphesi olduğundan bir seçenek DEĞİLDİR. Çocuğun ebeveynin içinde kalan alanı doldurmasından şüpheleniliyor. Daha fazla bilgi için canlı DEMO'ya bakın. Live DEMO

Answer 1

Bildiğim kadarıyla ben farkındayım olarak CSS ile bunu yapmak kolay bir yolu yoktur. Esasen tarayıcıdan geriye kalan alanı kaydırılabilir öğe ile doldurmasını istiyorsunuz. Sen (tembelim, çünkü bu örnek jQuery kullanır) JavaScript ile bunu yapabilirsiniz:

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

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

Answer 2

Kontrolü bunu Fiddle

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

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

div.child { 
    height: 100%; 
} 

Answer 3

Sen flexbox'a kullanmayı deneyebilirsiniz.

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

Bu bir tür kesmekse emin değilim. Ancak bu problemi çözüyor görünüyor.