Div is not fitting the space available

Question

I know that this question has already been asked, but I tried everything and I haven't find a solution, so I'm asking again, my apologizes :-).

I'm trying to make my row fill all the remaining screen space of the page, however, my row never shrink, it stays at his initial size.

Notice that my map fits the size of the div.

Here is the code that i'm using :

<div class="row">
  <div class="col-xl-12 col-md-12 mb-12 col-lg-12 ">
    <div class="card shadow mb-4 h-100">

      <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
        <h6 class="m-0 font-weight-bold text-primary">
          Carte des balises
        </h6>
      </div>

      <div class="card-body">
        <div id="map"></div>
      </div>

    </div>
  </div>
</div>

And there is the render of the page :

If someone could give me some clues, I would really appreciate it !

Thanks in advance, :)