html - CSS Grid - 行高度相同(最大高度)

Question

我试图让我的行在 CSS 网格中具有相同的高度，但同时，应该有一个由 vh 指定的最大高度。我想要的是，如果有 4 行，最大高度为 100vh，而这 4 行中当前最大的高度是 70vh，我想要所有行都为 70vh。但是，如果假定最大高度为 120vh，我希望所有行的高度都为 100vh。有办法吗？下面是我到目前为止的代码，我是 CSS 网格的新手所以请帮助我!如果有什么更简单的方法可以实现我想做的事情，请帮助指导我，谢谢!

.project-grid {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    row-gap: 1%;
    grid-template-areas: "card" "activities" "requirements" "quotations" "notations"
}

.card-row {
    grid-area: card;
}

.activities-box {
    grid-area: activities;
    overflow: auto;
}

.requirements-box {
    grid-area: requirements;
    overflow: auto;
}

.quotations-box {
    grid-area: quotations;
    overflow: auto;
}

.notations-box {
    grid-area: notations;
    overflow: auto;
}

有了这个，行都遵循相同的最大高度，但没有设置最大高度。

Answer 1

只需将 max-height 设置为网格项:

.box {
  display: grid;
  grid-template-columns: 100%;
  grid-auto-rows: 1fr;
  row-gap: 5px;
}

.box > * {
  max-height:100vh;
  overflow:auto;
  border:2px solid red;
  background:#f2f2f2;
  box-sizing:border-box;
}

<div class="box">
  <div><div style="height:50vh"></div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

内容大于100vh；

.box {
  display: grid;
  grid-template-columns: 100%;
  grid-auto-rows: 1fr;
  row-gap: 5px;
}

.box > * {
  max-height:100vh;
  overflow:auto;
  border:2px solid red;
  background:#f2f2f2;
  box-sizing:border-box;
}

body {
  margin:0;
}

<div class="box">
  <div><div style="height:130vh"></div></div>
  <div></div>
  <div></div>
  <div></div>
</div>