I am using the sidenav to display a shopping cart that is dynamically loaded, and I want the header and footer of the sidenav to not scroll. When I load the content, top header of the sidenav does not scroll, but the footer does. Here is the code for the sidenav right now:

    <nav data-mdb-sidenav-init id="snCart" class="sidenav" data-mdb-hidden="true" data-mdb-scroll-container="#snCartContainer" data-mdb-mode="over">
    <a data-mdb-ripple-init class="d-flex justify-content-center py-4 mb-2" data-mdb-ripple-color="primary" data-mdb-width="300">
        <img id="lgCartLogo" class="img-fluid" src="../img/logo_150x60.jpg" alt="Dash Office Supply Logo" draggable="false" />
    </a>
    <div class="w-100 text-center fs-5 fgDashSlogan fw-bold border-bottom border-2 mb-4">YOUR CART</div>
    <div class="sidenav-menu px-2 pb-5" id="snCartContainer">
        <div id="divData" />
    </div>
    <div class="text-center border-bottom border-2" style="min-height: 3rem;">
        <span class="fs-6 fst-italic text-muted">Total does NOT include shipping, which will be calculated at checkout.</span>
    </div>
</nav>

The div named "divData" is where I am loading the cart with dynamically generated HTML using an AJAX call. Everything displays properly, but the footer of the sidenav,scrolls down below the bottom of the screen, which it should not do. How do I refresh the sidenav once I load the dynamic data so the footer doesn't scroll?