Define scroll div height by parent. Any tips? - css

Question

So in resume, I have a #modal { max-height:90% } and I need to place a #footer element below and let the top remaing space to a scrollable div, but is not possible to have a scroll div without setting the height (or max-height, as far as I know).
The way I achieved this is calculating the height of the scrollable div, like so: https://codepen.io/murillotsoza/pen/xxpJPVJ (change the code view to the left/right side)
But I still think that there is a prettier solution without height calculations. Any tips?
#scroll {
max-height: calc(90vh - 18px - 50px);
overflow-y: auto;
overflow-x: hidden;
}
.item {
font-size: 18px; text-align: center;
line-height: 50px; width: 300px;
border-bottom: 1px solid #ccc;
}
#footer {
font-size: 18px; text-align: center;
line-height: 50px; width: 100%;
background-color: #333; color: white;
}
#title{
height: 18px;
background-color: black;
}
#content {
background-color: white;
}
#modal {
max-height: 90%;
overflow: hidden;
}
#background {
position: fixed;
top: 0; left: 0;
width: 100vw;
height: 100vh;
background-color: #eee;
display: flex;
justify-content: center;
align-items: center;
}
body { margin : 0; }
<div id='background'>
<div id="modal">
<div id="title"></div>
<div id="content">
<div id="scroll">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
<div id="footer">FOOTER</div>
</div>
</div>
</div>

Answer 1

Here is a modern CSS grid solution:
You can change around your grid-template fraction units to give more room to your header, scroll area and footer respectively. Currently the 80% height is divided into 4, with 1fr given to your header, 2fr given to your scroll area, and 1fr given to your footer.
* {
box-sizing: border-box;
}
html,
body {
height: 100vh;
}
body {
display: grid;
place-content: center;
margin: 0;
background-color: #eee;
}
.modal {
display: grid;
grid-template: 1fr 2fr 1fr / auto;
width: 300px;
height: 80%;
overflow: hidden;
}
header {
background-color: black;
}
.scroll {
overflow-y: auto;
}
.item {
font-size: 1.1rem;
text-align: center;
line-height: 3rem;
border-bottom: 1px solid #ccc;
}
footer {
font-size: 1.1rem;
text-align: center;
background-color: #333;
color: white;
}
<article class="modal">
<header></header>
<div class="scroll">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
<footer>FOOTER</footer>
</article>
Codepen: https://codepen.io/zachjensz/pen/MWrBVbv