CSS网格项目单元会扩展而不是溢出

Question

我有一个CSS网格：

|-------|-------------------|
|-------|                   |
|       |      overflow     | 
|-------|-------------------|
|-------|-------------------|

而且我不能阻止“溢出”的增长，尽管设置了，但基本上它总是在扩大：

overflow: auto;

在CSS中。如何实现呢？下面的代码段。

html {
  font-size: 22px;
}
body {
  padding: 1rem;
/*   grid-template-columns: 1fr 3fr; */
}

.wrapper {
  max-height: 70vh;
  padding: 1rem;
}

.header {
  background-color: red;
  color: white;
  padding: 1rem;
  height: 2rem;
  resize: horizontal;
  grid-area: 1 / 1 / 2 / 2;
}

.nav {
  background-color: lightgrey;
  color: baclk;
  padding: 1rem;
  height: 4rem;
  overflow: auto;
  min-width: 12rem;
  resize: horizontal;
  grid-area: 2 / 1 / 3 / 2;
}

.scroll {
  background-color: dodgerblue;
  color: white;
  padding: 1rem;
  overflow: auto;  
  grid-area: 1 / 2 / 3 / 3;
}

.prev {
  background-color: black;
  color: white;
  padding: 1rem;
  height: 4rem;
  grid: 3 / 1 / 4 / 2; 
}

.select {
  background-color: lightgrey;
  color: white;
  padding: 1rem;
  height: 4rem;
  grid-area: 4 2 4 4;
}

.cards {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-gap: 0.5rem;
}

/* Screen larger than 600px? 2 column */
@media (min-width: 600px) {
  .cards {
    grid-template-columns: 1fr 3fr;
  }
}

<div class="wrapper">
  <div class="cards">
    <div class="header">HEADER</div>
    <div class="scroll">
      <p>111</p>
      <p>222</p>
      <p>333</p>
      <p>444</p>
      <p>555</p>
     <!--   <p>666</p>
     <p>777</p>
      <p>888</p>
      <p>999</p> -->
    </div>
    <div class="nav">NAV</div>
    <div class="prev">PREVIEW</div>
    <div class="select">SELECT</div>
  </div>
</div>

Answer 1

事实证明，解决方案是在网格定义中添加一行：

grid-template-rows: auto 1fr auto;

当“滚动”区域溢出而网格按预期缩放时，这将产生一个不错的布局。下面是更新的代码段。

html {
  font-size: 22px;
}
body {
  padding: 1rem;
  overflow: hidden;
/*   grid-template-columns: 1fr 3fr; */
}

.header {
  background-color: red;
  color: white;
  padding: 1rem;
  height: 2rem;
  grid-area: 1 / 1 / 2 / 2;
}

.nav {
  background-color: lightgrey;
  color: baclk;
  padding: 1rem;
  height: auto;
  overflow: auto;
  min-width: 12rem;
  resize: horizontal;
  grid-area: 2 / 1 / 3 / 2;
}

.scroll {
  background-color: dodgerblue;
  color: white;
  padding: 1rem;
  overflow: auto; 
  max-height: 70vh;
  grid-area: 1 / 2 / 3 / 3;
}

.prev {
  background-color: black;
  color: white;
  padding: 1rem;
  max-height: 30vh;
  grid: 3 / 1 / 4 / 2; 
}

.select {
  background-color: lightgrey;
  color: white;
  padding: 1rem;
  height: 4rem;
  grid-area: 4 2 4 4;
}

.cards {
  max-width: 80vw;
  height: 90vh;
  margin: 0 auto;
  display: grid;
  grid-gap: 0.5rem;
}

/* Screen larger than 600px? 2 column */
@media (min-width: 600px) {
  .cards {
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto 1fr auto;
  }
}

<div class="wrapper">
  <div class="cards">
    <div class="header">HEADER</div>
    <div class="scroll">
      <p>111</p>
      <p>222</p>
       <p>333</p>
      <p>444</p>
      <p>555</p>
      <p>666</p>
      <p>777</p>
  <!--    <p>888</p>
      <p>999</p> -->
    </div>
    <div class="nav">NAV</div>
    <div class="prev">PREVIEW</div>
    <div class="select">SELECT</div>
  </div>
</div>