Getting container to be full viewport width and height, static (with inner scroll on div)

Question

I'm not concerned about mobile, but my issue here is on laptop screens, monitors, etc. using bootstrap (though I'm open to using flex if it will be better overall)

This will hold a map in the large column and a list of locations in the small column, but the key I'm trying to achieve right now is a static container that is 100% width and height of the viewport (minus 60px for the header) and no scrolling outside of it. The idea is that the list of locations is an inner/hidden scroll (if that makes sense).

How can I get this container overall to sit full width and height without the ability to scroll outside of it? Even if there are 150 listings, I don't want it to push the height of the stores-list div, I want it to be only an inner scroll

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<header style="height:60px;">
<ul style="display:flex;">
<li>Home</li>
<li>About</li>
</ul>
</header>
<div  style="width:100%; margin:0 auto; height: calc(100% - 60px)!important ; max-width:100% !important;">
  <div class="row" style="height: calc(100% - 60px); !important;">
    <div class="col-lg-8" id="maplist-area" >
      <div id="map" style="margin-top:20px; width:100%; height:100%;border:1px solid red;">
      </div>
    </div>
      
    <div class="col-lg-4">
       <div style="padding-top:35px; margin-bottom:20px;">
          <form id="mapSR" class="home-form" method="post">
          <input id="ss" type="text" name="locationSearch" placeholder="search" style="border-radius:18px; padding:4px; width: 100%;" />
          </form>
       </div>
       <div id="stores-list" class="stores-list" style="overflow-y: scroll; height: 80%;">    
       </div>
    </div>
  </div>
</div>