#container { height: 70%; background-color: red; } #childContainer { height: 100%; overflow: scroll; background-color: blue; } .child { height: 20% !important; }

 <div id="container"> <div id="childContainer"> <div class="child"><h1>Title</h1><p>Paragraph</p></div> <div class="child"><h1>Title</h1><p>Paragraph</p></div> <div class="child"><h1>Title</h1><p>Paragraph</p></div> <div class="child"><h1>Title</h1><p>Paragraph</p></div> <div class="child"><h1>Title</h1><p>Paragraph</p></div> <div class="child"><h1>Title</h1><p>Paragraph</p></div> </div> </div>

Sin los elementos h1 y p en el div secundario, el código funciona como se esperaba. Sin embargo, estos elementos parecen estar afectando la altura de cada div hijo, lo que a su vez está estirando el childContainer