如何在CSS网格中将minmax函数与vh结合？

Question

我想将移动视图中的一行高度设置为最大670px，并低于最小的100vh，但是当我这样写时：

@media only screen and (max-width: $bp-mobile) {
    grid-template-rows: minmax(100vh, 67rem) repeat(7, max-content);
  }

如果视口高度等于1000px，它总是将我的第一行扩展为100vh，而我的行的高度为1000px。如何将低于特定最大高度vh的670px组合为始终为100vh并超过670px的组合，以将该行锁定为高度670px？

.container {
  display: grid;
  border: 2px solid red;
  grid-template-rows: minmax(100vh, 67rem) 1fr;
}

.test-1 {
  background-color: orangered;
}
.test-2 {
  background-color: cyan;
  height: 30rem;
}

<div class="container">
  <div class="test-1">1</div>
  <div class="test-2">2</div>
</div>

Answer 1

您可以使用max-height进行如下操作：

.container {
  display: grid;
  border: 2px solid red;
  grid-template-rows: auto 1fr;
}

.test-1 {
  background-color: orangered;
  height:100vh;
  max-height:67rem;
}
.test-2 {
  background-color: cyan;
  height: 30rem;
}


html {
  font-size:10px;
}

<div class="container">
  <div class="test-1">1</div>
  <div class="test-2">2</div>
</div>