Expected Result
I am trying to have two div's that fill the entire viewport. div #1 will push div #2 down to fit it's content. div#2 will fill the remaining viewport size and if the content is bigger, than scroll the rest.
Example:
Viewport Height = 1000px;
div#1 content height = 400px;
div#1 height = 400px;
div#2 height = 1000px (viewport height) - 400px (div#1 height) = 600px;
div#2 content height = 2000px;
div#2 scroll (`overflow: auto`) amount = 2000px (div#2 content height) - 600px (#div2 height) = 1400px
Actual Result
div#2 height ends up being the viewport height and since it is pushed down by div#1 the content gets cut off.
Here's a fiddle: http://jsfiddle.net/vtb9h5fd/2/
html,
body {
height: 100vh;
overflow: hidden;
margin: 0;
padding: 0;
}
.container {
height: 100%;
}
.container .box {
text-align: center;
color: white;
font-family: sans-serif;
font-size: 36px;
padding: 20px;
}
.container .box-1 {
background-color: green;
overflow: auto;
}
.container .box-2 {
background-color: blue;
overflow: auto;
height: 100%;
}<div class="container">
<div class="box box-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="box box-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum ligula sed ipsum commodo, a consequat turpis commodo. Phasellus sed leo gravida, sodales orci eget, pellentesque eros. Curabitur pharetra dui in magna efficitur, vel aliquam arcu congue. Cras gravida nunc non erat ullamcorper ultricies. Integer dictum semper diam, nec suscipit odio lobortis in. Pellentesque sed faucibus sapien. Ut vel purus rutrum, malesuada sapien vehicula, finibus quam. Aenean at mollis turpis. Phasellus bibendum nulla ac lobortis consequat. Mauris eget eros sollicitudin, ultricies magna vitae, maximus ligula. Nunc rhoncus mattis sem non dictum. Aliquam erat volutpat. In enim neque, faucibus non faucibus in, vestibulum ac odio.
Pellentesque facilisis aliquam aliquam. Nam consectetur augue eros, non imperdiet neque varius at. Nullam in sapien finibus, convallis mi non, consectetur ex. Aliquam erat volutpat. Cras feugiat, augue ac cursus imperdiet, sapien quam pretium mi, venenatis pretium ante lacus eu ipsum. Ut tincidunt, arcu sed bibendum varius, lacus urna elementum risus, dictum elementum dui felis sit amet est. Quisque sit amet diam molestie, porttitor diam eget, scelerisque eros. Mauris lacinia eu mi ut pulvinar. Nam sodales est pellentesque, pretium lectus quis, mollis libero. Nulla rutrum nibh eget semper lobortis. Duis sit amet justo aliquet, feugiat magna vel, aliquet augue. Nunc ultricies, ex et mollis maximus, risus justo blandit tellus, consectetur hendrerit sapien tellus a quam.
In consectetur felis vel purus sollicitudin, a lacinia lacus finibus. Phasellus eget ex eget felis semper ultrices vel sed lectus. Quisque posuere sagittis eros, nec luctus quam tincidunt dignissim. Mauris sed feugiat sapien, eget aliquet quam. Donec pellentesque arcu et vehicula imperdiet. Donec eget magna pulvinar, laoreet felis a, vulputate tellus. Etiam sit amet ex eleifend, ullamcorper augue dictum, accumsan risus. Etiam volutpat mollis massa sit amet pretium. Pellentesque venenatis, tortor a consequat semper, elit nulla auctor mi, in pretium odio mi vitae ante. Donec lectus lectus, tempor ut volutpat id, elementum quis quam. Fusce non venenatis lorem. Etiam leo nunc, suscipit quis lorem a, rhoncus sollicitudin mauris. In facilisis diam leo, et dignissim justo lacinia id.
</div>
</div>I am pretty sure this is because height: 100% refers to the parent height of 100vh (viewport height). I am not sure how else to do this.
