Safari 上具有最大内容的网格模板行无法按预期工作

Question

我们正在使用 CSS Grid，我们意识到还有其他方法可以让以下代码工作，但我们想使用 CSS Grid。

我们有以下场景，我们的 CSS 编译为：

.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在第一个属性中添加了-webkit前缀max-content。这是预期和期望的。但是，当您尝试在 Safari 中呈现此 CSS 时，Safari 使用第二个属性（无-webkit前缀）并且无法正常工作。

我相信 Safari 会看到具有相同名称的属性并使用后者。

问题：我应该如何使用max-content它才能在 Safari 和 Chrome 中工作？有没有办法让Safari“选择”包含-webkit前缀的正确属性，max-content或者我应该使用max-content/min-content以不同的方式？

请看这个codepen

.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);
}

* {
  -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;
}

请在 Chrome 和 Safari 上进行比较，看看为什么我们需要-webkit前缀max-content，Chrome 可以按需要工作。