Extending Bootstrap 5 card to bottom of screen goes off screen

I'm using BS 5 (latest) and have set up a two column page. In the right column, I added a card which I want to extend to the bottom of page.

There is padding at the top and bottom of the card.

I added vh-100 to the card but the issue is that the card goes past the bottom of the screen, causing the scrollbar to appear. If the padding is removed, it works, but the top and bottom borders of the card are not visible.

<div class="container-fluid mt-2">
  <div class="row">
    <div class="col-2">
      Menu system
    </div>
    <div class="col-10">
      <div class="card vh-100 mb-3">
        <div class="card-body">
          main content area
        </div>
      </div>
    </div>
  </div>
</div>

JSFiddle

How can I make the card take up the entire space minus the padding constraints?

Add the following CSS:

.card {
  height: calc(100vh - 1rem - 0.5rem) !important;
}

Set height to full-screen height, minus all the paddings and/or margins.

See the snippet below.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.card {
  height: calc(100vh - 1rem - 0.5rem) !important;
}

<!-- language: lang-html -->

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

<div class="container-fluid mt-2">
  <div class="row">
    <div class="col-2">
      Menu system
    </div>
    <div class="col-10">
      <div class="card mb-3">
        <div class="card-body">
          main content area
        </div>
      </div>
    </div>
  </div>
</div>

<!-- end snippet -->

EDIT