How can I create a css grid layout where only part of it is scrollable - without using a calc function?

Question

I'm trying to make this view using grid layout where only a part of the content is scrollable.
In the example below, only 'master-list' should be scrollable.

The problem is in this line: grid-template-rows: 40px calc(100vh - 40px);
I want to be able to define for the second row to just take up the available space, without overflowing.

Is there another way to do it besides using calc?

If I change it to grid-template-rows: 40px auto; then the main-view will get a scrollbar.

.main-view {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: 40px calc(100vh - 40px);
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}
.actions {
  background: lightgreen;
  grid-column: 2 / 4;
  grid-row: 1;
}
.filters {
  background: lightblue;
  grid-column: 1;
  grid-row: 1 / 4;
}
.master-list {
  background: lightcoral;
  grid-column: 2 / 3;
  grid-row: 2 / 4;
  overflow-y: auto;
}

<div class="main-view">
  <div class="actions">actions</div>
  <div class="filters">filters</div>
  <div class="master-list">
    <div>row</div><div>row</div><div>row</div><div>row</div><div>row</div><div>row</div>
    <div>row</div><div>row</div><div>row</div><div>row</div><div>row</div><div>row</div>
    <div>row</div><div>row</div><div>row</div><div>row</div><div>row</div><div>row</div>
    <div>row</div><div>row</div><div>row</div><div>row</div><div>row</div><div>row</div>
    <div>row</div><div>row</div><div>row</div><div>row</div><div>row</div><div>row</div>
    <div>row</div><div>row</div><div>row</div><div>row</div><div>row</div><div>row</div>
  </div>
  <div class="details">some details here</div>
</div>