Creating an expandable element in scss and vue

Question

I'm new to vue and am trying to take a component and allow it to take up all the space of other components when toggled. In this view I have a few components: a navbar, sidebar, hud, filtering, table, and histogram. I want to make the table expand to the full page when a button is clicked. Thoughts? I'm thinking I could do this in css, but I'm not entirely sure

Here's my setup:

<template lang="pug">
.Page
  SideBar(activeItem="Page")
  .Page__layout
    NavBar
    .Page__content
      PageHud(:update="updatePage")
      PageFiltering(:update="updatePage")
      PageTable(:loading="loading" :date="date")
      PageHistogram(:update="updatePage")
</template>

<script setup lang="ts">
//not relevant code to update the page)
</script>

<style lang="scss">
@import "../../views.mixins";

.Page {
  @include fullscreen_container_view;
  display: flex;
  flex-direction: row;

  &__layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
  }
  &__content {
    height: 100%;
    max-height: 100%;
    flex-grow: 1;
    display: grid;
    position: relative;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.5fr);
    grid-template-rows: minmax(0, 1.5fr) minmax(0, 1.5fr);
    grid-template-areas:
      ". ."
      ". .";
    overflow: hidden scroll;

    @media (max-height: 900px) {
      height: 100%;
      max-height: 100%;
      flex-grow: 1;
      display: grid;
      position: relative;
      grid-template-columns: minmax(0, 1.75fr) minmax(0, 0.5fr);
      grid-template-rows: minmax(0, 0.5fr) minmax(0, 1fr);
      grid-template-areas:
        ". ."
        ". .";
      overflow: hidden scroll;
    }
    @media (max-height: 700px) {
      height: 100%;
      max-height: 100%;
      flex-grow: 1;
      display: grid;
      position: relative;
      grid-template-columns: minmax(0, 2.25fr) minmax(0, 0.75fr);
      grid-template-rows: minmax(0, 0.75fr) minmax(0, 1fr);
      grid-template-areas:
        ". ."
        ". .";
      overflow: hidden scroll;
    }
    @media (max-height: 568px) {
      height: 100%;
      max-height: 100%;
      flex-grow: 1;
      display: grid;
      position: relative;
      grid-template-columns: minmax(0%, 60%) minmax(0%, 100%);
      grid-template-rows: minmax(0%, 50%) minmax(0%, 50%);
      grid-template-areas:
        ". ."
        ". .";
      overflow: hidden scroll;
    }
  }
}
</style>