how to use flex inside tab container for full height?

[hacknorris-code]

i'm writing a game engine and i want to make UI look like that:

so far i made good looking topnav, footer and theoretically made these tabs. BUT
for the now i can either not make it full-height (like on picture above) and only for actual content, so it looks like that:

OR same and also to not use tabs (all content is shown at once with no possiblity to toggle), like that:

i'm also able to avoid duplicating flex container BUT with VH it is bigger than viewport what looks even worse…

any ideas to merge both things of being tabbed AND to make togglable content full height?

actual code (for first version without fullsize) here

[hacknorris-code]

asked a robot which fixed that.

actual HTML code:

    <div class="tab-content flex-grow-1 d-flex">
    <div class="tab-pane active border w-100 grid" id="view-1">
    <div class="d-flex flex-grow-1">
      <div class="col-4 g-col-4 h-100">
        1
    </div>
    <div class="col-8 g-col-8 h-100">
        <canvas class="h-100 w-100 bg-warning"></canvas>
    </div>
  </div>
    </div>
    <div class="tab-pane d-none border w-100 grid" id="view-2">
      <div class="d-flex flex-grow-1">
        <div class="col-4 g-col-4 h-100">
          2
      </div>
      <div class="col-8 g-col-8 h-100">
          <canvas class="h-100 w-100 bg-warning"></canvas>
      </div>
    </div>
    </div>
    <div class="tab-pane d-none border w-100 grid" id="view-3" >
      <div class="d-flex flex-grow-1">
        <div class="col-4 g-col-4 h-100">
          3
      </div>
      <div class="col-8 g-col-8 h-100">
          <canvas class="h-100 w-100 bg-warning"></canvas>
      </div>
    </div>
    </div>
  </div>

and additional JS:

    document.addEventListener('DOMContentLoaded', function() {
  var tabElms = document.querySelectorAll('button[data-bs-toggle="tab"]');
  
  tabElms.forEach(function(tabElm) {
    tabElm.addEventListener('shown.bs.tab', function (event) {
      var target = document.querySelector(event.target.getAttribute('data-bs-target'));
      var siblings = target.parentNode.children;
      
      for (var i = 0; i < siblings.length; i++) {
        if (siblings[i] !== target) {
          siblings[i].classList.add('d-none');
        } else {
          siblings[i].classList.remove('d-none');
        }
      }
    });
  });
});

i hope this will be enough usable for others problems to be solved too :)