grid-template-rows with max-content on safari not working as expected

Question

We are working with CSS Grid, we realize there are other ways to get the following code to work, but we would like to use CSS Grid.

We have the following scenario, our CSS compiles to:

.r4 {
  grid-template-rows: var(--height-base) auto minmax(var(--height-base), -webkit-max-content) minmax(var(--height-base), -webkit-max-content);
  grid-template-rows: var(--height-base) auto minmax(var(--height-base), max-content) minmax(var(--height-base), max-content);
}

Autoprefixer has added -webkit prefix to max-content in the first property. This is expected and desired. However, when you try to render this CSS in Safari, Safari uses the second property (without -webkit prefix) and doesn't work properly.

I believe that Safari sees the properties having the same name and uses the latter.

Question: How should I use max-content so it works in Safari and Chrome? Is there a way to have Safari "choose" the correct property that includes the -webkit prefix for max-content or should I use max-content/min-content a different way?

Please see this codepen

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
}

:root {
  --height-base: 56px;
  --panels: 1;
  --panel-width: 100%;
}

::-webkit-scrollbar {
  display: none;
}

.grid-wrapper {
  background: black;
}

.panel {
  background: #6edde6;
}

.header {
  background: #0cf574;
}

.main {
  background: #15e6cd;
}

.post-content {
  background: #09C05B;
}

.footer {
  background: #1ccad8;
}

.grid-wrapper {
  display: grid;
  grid-template-columns: repeat(var(--panels), var(--panel-width));
  height: 100vh;
}

.panel {
  display: grid;
  height: inherit;
}

.column {
  display: grid;
  height: 100%;
}

.r4 {
  grid-template-rows: var(--height-base) auto minmax(var(--height-base), -webkit-max-content) minmax(var(--height-base), -webkit-max-content);
  grid-template-rows: var(--height-base) auto minmax(var(--height-base), max-content) minmax(var(--height-base), max-content);
}

.main {
  position: relative;
}

.main>.column {
  position: absolute;
  width: 100%;
  overflow: hidden;
}

.scrollable {
  overflow-y: auto !important;
}

<div class="grid-wrapper">
  <div class="panel r4">
    <div class="header">Header</div>
    <div class="main">
      <div class="column scrollable">
        <div>Main Content should be scrollable</div>
        <div>Autoprefixer adds minmax(var(--height-base), -webkit-max-content) for safari</div>
        <div>minmax(var(--height-base), max-content) -webkit- is not required otherwise</div>
        <div>Main Content</div>
        <div>Main Content</div>
        <div>Main Content</div>
        <div>Main Content</div>
        <div>Main Content</div>
        <div>Main Content</div>
        <div>Main Content</div>
        <div>Main Content</div>
        <div>Main Content</div>
        <div>Main Content</div>
        <div>Main Content</div>
        <div>Main Content</div>
        <div>Main Content</div>
        <div>Main Content</div>
        <div>Main Content</div>
        <div>Main Content</div>
        <div>Main Content</div>
        <div>Main Content</div>
        <div>Main Content</div>
        <div>Main Content</div>
        <div>Main Content</div>
        <div>Main Content</div>
        <div>Main Content</div>
        <div>Main Content</div>
        <div>Main Content</div>
        <div>Main Content</div>
        <div>Main Content</div>
        <div>Main Content</div>
      </div>
    </div>
    <div class="post-content">
      Post Content should always be visible without scrolling, growing to accomadate its contents<br> Post Content<br> Post Content<br> Post Content<br> Post Content<br> Post Content<br> Post Content<br>
    </div>
    <div class="footer">Footer</div>
  </div>
</div>

Please compare on Chrome vs Safari to see why we need -webkit prefix for max-content, Chrome works as desired.