CSS - Çocukları konteynerin içinde saklayın

Question

Bir kabın içine 2 çocuk sığdırmadan sığmaya çalışıyorum. https://jsfiddle.net/195em81t/

#footer varsa o kabın% 20'sini alacak ve #content diğer% 80 doldurmak ve gerekirse bir kaydırma çubuğu eklemek böylece onu istiyorum:
İşte benim sorunun bir örnektir.

Ben bazen #footer Ben yüksekliğinin% 100 almak #content istediğiniz bu durumda mevcut olmayacaktır #content zor% 80 yüksekliğini ayarlamak istemiyorum;

Answer 1

Flexbox'ı kullanabilirsiniz. flex-grow özelliğini kullanarak, esnek öğeler kalan alanı doldurmak için büyüyebilir.

.container { 
 
    height: 200px; 
 
    width: 100px; 
 
    border: 2px; 
 
    border-style: solid; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.content { 
 
    flex: 80%; /* Start at 80%, then grow to fill remaining space */ 
 
    overflow: auto; /* In case contents are too tall */ 
 
} 
 
.footer { 
 
    flex: 20%; /* Start at 20%, then grow to fill remaining space */ 
 
    overflow: auto; /* In case contents are too tall */ 
 
}

<div class="container"> 
 
    <div class="content"> 
 
    Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> 
 
    </div> 
 
    <div class="footer"> 
 
    Footer 
 
    </div> 
 
</div> 
 
<hr /> 
 
<div class="container"> 
 
    <div class="content"> 
 
    Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> 
 
    </div> 
 
</div>