Trying to create a vertical scrollable div within the remaining space of various elements that do not have fixed heights.
I currently have a flexbox element that adjusts to its content, but what I actually need is for the element to fill up the empty space and allow its content to scroll inside.
HTML
<div class="wrapper-1">
<div>some stuff</div>
<div>some other stuff</div>
</div>
<div class="wrapper-2">
<div>more and more...</div>
</div>
<div class="wrapper-3">
<div id="header">
<div>My</div>
<div>Header than can grow</div>
</div>
<div id="content">
<div>Content filling the remaining space until scrolling is needed</div>
...
<div>More dynamic content here</div>
</div>
</div>
CSS
html, body {
margin: 0;
height: 100%;
}
.wrapper-1 {
background: white;
}
.wrapper-2 {
background: lime;
}
.wrapper-3 {
display: flex;
flex-direction: column;
}
#header {
background: #edc;
flex: 1 1 40px;
}
#content {
flex: 1 1 auto;
background: yellow;
overflow: auto;
}
#content div {
min-height: 50px;
}
The #content div should span from the #header to the bottom of the page.
An ideal solution would involve only CSS, but a JavaScript alternative could be considered as long as it remains functional when resizing the browser window.