Full Body Panel

How can I make the body elemnt extend all the way to the footer? I want to show a full screen Google map in between the header and footer of my page.

<div class="wrapper d-flex flex-column min-vh-100 bg-light dark:bg-transparent">
      <header class="header header-sticky">
        <div class="container-fluid">
          <button class="header-toggler px-md-0 me-md-3" type="button" onclick="coreui.Sidebar.getInstance(document.querySelector('#sidebar')).toggle()">
            <svg class="icon icon-lg">
              <use xlink:href="@coreui/vendors/@coreui/icons/svg/free.svg#cil-menu"></use>
            </svg>
          </button><a class="header-brand d-md-none" href="#">
            <svg width="118" height="46" alt="CoreUI Logo">
              <use xlink:href="@coreui/assets/brand/coreui.svg#full"></use>
            </svg></a>
        </div>
      </header>
      <div class="body flex-grow-1" style="height: 100% !important">
        <div style="background-color: red; width: 100% !important; height: 100% !important">
          d
        </div>
      </div>
      <footer class="footer">
        <div class="ms-auto"><img id="GoogleMapsLogo" onclick="window.open('https://www.google.com/maps/about/#!/');" src="@google/powered_by_google_on_white.png"></div>
      </footer>
    </div>