How can a scrollable div and a fixed bottom div dynamically change height inside a wrapper?

Question

I'm trying to stack 2 divs inside of a wrapper div. I need one div of a set height to stay at the bottom of the wrapper div, and I need the top div to scroll. I can't separate them because I want the wrapper to grow with content in the top div until it is too big for the screen and then start scrolling without hiding the bottom div.

Here is an example.

I can almost figure this out, however the bottom div overlaps the last bit of information in the content div. Is there a way to change the height of the top div such that it leaves room for the bottom div no matter it's height?

HTML

<div class="wrapper">
  <div class="top">
    <div class="content">
      // Dynamically added information that
      // grows the height of div.content
    </div>
  </div>
  <div class="bottom">
    // Input box or static button panel
  </div>
</div>

SCSS

.wrapper {
  max-height: 100vh;
  position: relative;
  overflow: hidden;

  .top {
    max-height: inherit;
    overflow: hidden;

    .content {
      max-height: inherit;
      overflow-y: scroll;
    }
  }
  .bottom {
    position: absolute;
    bottom: 0;
  }
}

Answer 1

You can add a padding-bottom:150px to the wrapper (150px is the height of the bottom div). Like here. This will give enough space for the bottom div.

Answer 2

It's not that hard. Just need to use the calc feature:

Fiddle

You can keep the wrapper dynamic by setting the value in the variable, and then forego your max-height: inherit rules.

Here's the relevant SCSS

$box_height: 100vh;
.wrapper {
    height: $box_height;
    max-height: $box_height;
    position: relative;
    overflow: hidden;
    
    .top {
        max-height: unquote("calc(" + $box_height + " - 150px)");
        overflow: hidden;
        
        .content {
            max-height: unquote("calc(" + $box_height + " - 150px)");
            overflow-y: scroll;
        }
    }
}