如何拉伸网格项目，同时将其他项目保留为自动高度/宽度

Question

在包含两个项目的网格中，如果我想要第一个项目为50px而第二个项目要扩展整个高度，我可以这样做：

.grid { display: grid; grid-template-rows: 50px; }
.item1 {}
.item2 {}

<div class="grid">
  <div class="item1">1</div>
  <div class="item2">2</div>
</div>

但是，如果.item1中的内容增长超过50px，我如何让第一行扩展？

我尝试了一些不同的解决方案，包括minmax和使用align-self尝试在需要时拉伸item1，但感觉我错过了一些明显的东西。

这是一个起步小提琴：https://jsfiddle.net/mehulkar/d8f25L0g/

请注意，如果可能的话，我希望在内容增长时不必添加其他类来更改网格配置。

Answer 1

告诉第一行至少50px高。

告诉第二行消耗容器中的剩余空间。

这应该是你所需要的：

grid-template-rows: minmax(50px, auto) 1fr;

const button = document.querySelector('#expand');

let longString = 'item1 should expand. ';
for (var i = 0; i < 4; i++) {
  longString += longString;
}

button.addEventListener('click', () => {
  const item1 = document.querySelector('.item1');
  if (button.innerText.match(/expand/i)) {
    item1.innerHTML = longString;
    button.innerText = "Collapse";
  } else {
    item1.innerHTML = "1";
    button.innerText = "Expand";
  }
});

.grid {
  height: 100vh;
  margin: 10px;
  display: grid;
  grid-template-rows: minmax(50px, auto) 1fr;
}

.grid > div {
  border: solid 1px;
}

Try:
<button id="expand">Expand</button>

<div class="grid">
  <div class="item1 y">1</div>
  <div class="item2 r">2</div>
</div>