使用 flex-grow: 1 [重复] 使网格项目使用剩余空间，如 flex 项目

Question

在一个 flexbox 中，我可以在一个孩子上指定 flex-grow:1 来表示它应该占用剩余空间。

html, body {
  height: 100%
}

<div style="display:flex;flex-direction:column;height:100%">     
  <div style="background-color:yellow;height:50px"></div>
  <div style="background-color:red;flex-grow:1"></div>
</div>

是否可以用 css 网格做同样的事情？即针对子项指定它应该使用剩余空间而不使用 grid-template-rows 显式定义它？

html, body {
  height: 100%
}

<div style="display:grid;grid-template-columns:auto;height:100%">
  <div style="background-color:yellow;height:50px"></div>
  <!-- what to use instead of flex-grow:1? -->
  <div style="background-color:red;flex-grow:1;"></div>
</div>

真实场景涉及一个网格，其中包含运行时定义的列数，以及运行时定义的一组子项，其中一些可能是 display:none。

Answer 1

您可以使用grid-template-rows: min-content auto; 指定行高，这会最小化第一行并拉伸第二行。

html,
body {
  height: 100%
}

<div style="display:grid;grid-template-columns:auto;height:100%;grid-template-rows: min-content auto;">
  <div style="background-color:yellow;height:50px"></div>
  <div style="background-color:red;"></div>
</div>