我有一个两列的网格。第一列包含一个可以垂直调整大小的元素。第二列包含一个可滚动的列表。网格的高度需要与可调整大小的元素的高度一致。

JSFiddle

* {
  box-sizing: border-box;
}

.app {
  display: grid;
  grid-template-columns: 7fr 3fr;
  align-content: stretch;
  gap: 0.5em;
  width: 700px;
}

.first {
  background: lightgray;
  resize: vertical;
  overflow: auto;
}

.second {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 0.5em;
  background: lightgray;
  padding: 0.5em;
}
.card {
  border: 1px solid black;
  padding: 0.5em;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.name {
  font-size: 1.1em;
  font-weight: bold;
}
.job-title {
  font-size: 0.9em;
  font-weight: lighter;
  color: #333;
}

<div class="app">
  <div class="first">
    <div class="resizable">This is resizable.</div>
  </div>
  <div class="second">
    <div class="card">
      <div class="name">Zog Blorpton</div>
      <div class="job-title">
        Chief Button Alignment Officer, Button Engineering
      </div>
    </div>
    <div class="card">
      <div class="name">Luma Sparklefizz</div>
      <div class="job-title">
        Senior Unicorn Logistics Manager, Mythical Operations
      </div>
    </div>
    <div class="card">
      <div class="name">Grent Thumble</div>
      <div class="job-title">Director of Awkward Silence, Human Resources</div>
    </div>
    <div class="card">
      <div class="name">Vixi Doodlepop</div>
      <div class="job-title">
        Lead Snack Temperature Analyst, Cafeteria Science
      </div>
    </div>
    <div class="card">
      <div class="name">Brak Stonewhistle</div>
      <div class="job-title">Global Head of Elevator Music, Audio Strategy</div>
    </div>
    <div class="card">
      <div class="name">Niblet Fizzaroo</div>
      <div class="job-title">Junior Cloud Shape Architect, Sky Computing</div>
    </div>
    <div class="card">
      <div class="name">Torka Wobblechin</div>
      <div class="job-title">Principal Chaos Coordinator, Operations</div>
    </div>
    <div class="card">
      <div class="name">Elby Quarn</div>
      <div class="job-title">Vice President of Overthinking, Strategy</div>
    </div>
    <div class="card">
      <div class="name">Drimble Sprocket</div>
      <div class="job-title">Mechanical Pencil Consultant, Office Supplies</div>
    </div>
    <div class="card">
      <div class="name">Yara Fluffernoodle</div>
      <div class="job-title">Director of Whimsical Compliance, Legal</div>
    </div>
  </div>
</div>

我尝试把卡片包裹在一个绝对定位的包装层中，但这会导致grid-auto-rows: 1fr失去效果。由 这个回答 推荐的两个解决方案（height: 0; min-height: 100% 和 contain: size）也有同样的问题。

JSFiddle

* {
  box-sizing: border-box;
}

.app {
  display: grid;
  grid-template-columns: 7fr 3fr;
  align-content: stretch;
  gap: 0.5em;
  width: 700px;
}

.first {
  background: lightgray;
  height: 300px;
  resize: vertical;
  overflow: auto;
}

.second {
  position: relative;
}
.wrapper {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 0.5em;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  padding: 0.5em;
  background: lightgray;
  overflow: auto;
}
.card {
  border: 1px solid black;
  padding: 0.5em;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.name {
  font-size: 1.1em;
  font-weight: bold;
}
.job-title {
  font-size: 0.9em;
  font-weight: lighter;
  color: #333;
}

<div class="app">
  <div class="first">
    <div class="resizable">This is resizable.</div>
  </div>
  <div class="second">
    <div class="wrapper">
      <div class="card">
        <div class="name">Zog Blorpton</div>
        <div class="job-title">
          Chief Button Alignment Officer, Button Engineering
        </div>
      </div>
      <div class="card">
        <div class="name">Luma Sparklefizz</div>
        <div class="job-title">
          Senior Unicorn Logistics Manager, Mythical Operations
        </div>
      </div>
      <div class="card">
        <div class="name">Grent Thumble</div>
        <div class="job-title">Director of Awkward Silence, Human Resources</div>
      </div>
      <div class="card">
        <div class="name">Vixi Doodlepop</div>
        <div class="job-title">
          Lead Snack Temperature Analyst, Cafeteria Science
        </div>
      </div>
      <div class="card">
        <div class="name">Brak Stonewhistle</div>
        <div class="job-title">Global Head of Elevator Music, Audio Strategy</div>
      </div>
      <div class="card">
        <div class="name">Niblet Fizzaroo</div>
        <div class="job-title">Junior Cloud Shape Architect, Sky Computing</div>
      </div>
      <div class="card">
        <div class="name">Torka Wobblechin</div>
        <div class="job-title">Principal Chaos Coordinator, Operations</div>
      </div>
      <div class="card">
        <div class="name">Elby Quarn</div>
        <div class="job-title">Vice President of Overthinking, Strategy</div>
      </div>
      <div class="card">
        <div class="name">Drimble Sprocket</div>
        <div class="job-title">Mechanical Pencil Consultant, Office Supplies</div>
      </div>
      <div class="card">
        <div class="name">Yara Fluffernoodle</div>
        <div class="job-title">Director of Whimsical Compliance, Legal</div>
      </div>
    </div>
  </div>
</div>

如何让网格的高度仅取决于可调整大小的元素的高度，而不是可滚动列表的高度，同时确保所有卡片具有相同的高度？

我想要一个纯CSS的解决方案。

解决方案

把overflow属性移动到第二列并在那儿使用 contain: size。

.app {
  display: grid;
  grid-template-columns: 7fr 3fr;
  align-content: stretch;
  gap: 0.5em;
  width: 700px;
}

.first {
  background: lightgray;
  height: 300px;
  resize: vertical;
  overflow: auto;
}
.second {
  contain: size;
  overflow: auto;
}
.wrapper {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 0.5em;
  padding: 0.5em;
  background: lightgray;
}
.card {
  border: 1px solid black;
  padding: 0.5em;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.name {
  font-size: 1.1em;
  font-weight: bold;
}
.job-title {
  font-size: 0.9em;
  font-weight: lighter;
  color: #333;
}

<div class="app">
  <div class="first">
    <div class="resizable">This is resizable.</div>
  </div>
  <div class="second">
    <div class="wrapper">
      <div class="card">
        <div class="name">Zog Blorpton</div>
        <div class="job-title">
          Chief Button Alignment Officer, Button Engineering
        </div>
      </div>
      <div class="card">
        <div class="name">Luma Sparklefizz</div>
        <div class="job-title">
          Senior Unicorn Logistics Manager, Mythical Operations
        </div>
      </div>
      <div class="card">
        <div class="name">Grent Thumble</div>
        <div class="job-title">Director of Awkward Silence, Human Resources</div>
      </div>
      <div class="card">
        <div class="name">Vixi Doodlepop</div>
        <div class="job-title">
          Lead Snack Temperature Analyst, Cafeteria Science
        </div>
      </div>
      <div class="card">
        <div class="name">Brak Stonewhistle</div>
        <div class="job-title">Global Head of Elevator Music, Audio Strategy</div>
      </div>
      <div class="card">
        <div class="name">Niblet Fizzaroo</div>
        <div class="job-title">Junior Cloud Shape Architect, Sky Computing</div>
      </div>
      <div class="card">
        <div class="name">Torka Wobblechin</div>
        <div class="job-title">Principal Chaos Coordinator, Operations</div>
      </div>
      <div class="card">
        <div class="name">Elby Quarn</div>
        <div class="job-title">Vice President of Overthinking, Strategy</div>
      </div>
      <div class="card">
        <div class="name">Drimble Sprocket</div>
        <div class="job-title">Mechanical Pencil Consultant, Office Supplies</div>
      </div>
      <div class="card">
        <div class="name">Yara Fluffernoodle</div>
        <div class="job-title">Director of Whimsical Compliance, Legal</div>
      </div>
    </div>
  </div>
</div>