在safari上具有max-content的网格模板行未按预期工作

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＆＃34;选择＆＃34;包含-webkit的{​​{1}}前缀的正确属性，还是应该以不同的方式使用max-content / max-content？

请参阅this codepen

＆＃13;

＆＃13;

min-content

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

请在Chrome与Safari上进行比较，看看为什么我们需要<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> -webkit前缀，Chrome可以根据需要运作。