是否可能有一个CSS网格...增加其高度以动态适应父容器？

Question

我正在尝试是否有可能增加网格的高度以填充父容器的高度。

我尝试过的事情：

• 我尝试在网格容器和子div上设置100％的高度/最小高度。

• 100vh不是解决方案，因为它不是动态的。

我对如何执行此操作以及可能的操作有些困惑。

在此方面的任何帮助都将受到赞赏。谢谢！

我创建了一个CodePen来尝试在这里解决这个问题：

https://codepen.io/fylzero/pen/bGGvBPa

HTML

<div class="flex">
  <div class="grid">
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
  </div>
</div>

CSS

html, body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 100%;
}

.flex {
  display: flex;
  padding: 10px;

  flex-direction: column;
  flex: 1 1 auto;
  min-height: 100%;
  outline: 1px solid red;
}

.grid {
  display: grid;
  padding: 10px;

  height: 100%; /* THIS DOESN'T DO IT */

  grid-template-columns: 1fr minmax(auto, 400px) minmax(auto, 800px) 1fr;
  grid-template-rows: 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  outline: 1px solid green;
}

.grid div {
  padding: 10px;
  outline: 1px solid blue;
}