Define scroll div height by parent. Any tips?

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