CSS Grid to make a floating sidebar on desktop that stacks for mobile

I am trying to use css grid to create a right sidebar that on mobile will convert to the top and be stacked up top. However, my code for some reason it works great on the page load but it does not shrink the 1fr section when the screen collapses. I would have thought 1fr would shrink to the available space since i set the side bar at a fixed 350px. Any ideas? Also how would I set this up css wise for a stacked grid where the fixed sidebar goes on top then at full width.

.grid-container{
  display: grid;
  grid-template-columns: auto 350px;
  grid-template-rows: 1fr;
  grid-template-areas: "table-section filter-section";
}
.table-section{
  grid-area: table-section;
}
.filter-section{
  grid-area: filter-section;
}

My html is as follows:

  <div class="full-height" :class="$q.screen.lt.md ? 'grid-container-mobile' : 'grid-container'">
    <div class="col table-section q-pa-md">
    </div>
    <div class="col-auto filter-section q-pa-md">
      <TableFilters />
    </div>
  </div>

For some reason it does not collapse so the shrinking window size results in a overflow:

As you can see the 1fr section is not shrinking as if the width on initial load is fixed.

You need to use the @media query, link here, this allows you to use different rules depending on what condition you put inside the media query.

For example you could use

@media screen and (orientation: portrait) {

}

This isn't the best method to detect a mobile client but will always work when it is a mobile client but will also work on any portrait display.

With that, here is how I would structure your elements and the CSS to go with it.

<div class='container'>
   <div class='calendar'>

   </div>
   <div class='filter'>

   </div>
</div>

.container {
    display: flex;
    width: 100%;
    box-sizing: border-box;
}

.calendar {
    width: 100%;
    max-width: 100%;
}

.filter {
    width: 350px;
    box-sizing: border-box;
}

@media screen and (orientation: landscape) {
    /* media condition could be changed, just for example */
    
    .container {
        flex-flow: column-reverse;
        height: 100%;
    }

    .calendar {
        height: 100%;
        max-height: 100%;
    }

    .filter {
        height: 250px; /* whatever height you want it to be */
    }

}