FullClendar resizing in CSS grid

I changed our web app so that is uses grid now. But there is a problem with resizing FullCalendar. If I make the height of display smaller, the whole calendar gets a scroll, but only the content (without header) of the calendar should.

The content (CSS class="fc-scroller) has the height: fit-content because the default 344px is to small for all my content and I want the height of the actual calendar to be responsive.

The grid areas look like this:

grid-template-columns: 74rem  auto 56rem auto;
grid-template-rows: 8rem 7rem 1fr 22rem;
grid-template-areas:
      "navbar navbar navbar navbar""filter filter filter sidebar""calendar calendar calendar sidebar""table  . buttons sidebar";

So the calendar has (74rem + auto + 56rem) * 1fr of space, but the height of the content does not change accordingly.

The div that holds FullCalendar has this CSS code:

position: relative;
grid-area: calendar;
overflow-y: auto;
overflow-x: hidden;

Is there a problem in the grid or should I use something better than fit-content for the actual content?