html - 动态多行布局，CSS 网格容器必须占用其 Flexbox 容器中的所有空间以及第一行占用的剩余空间

Question

我正在尝试制作一个CSS网格布局，以便它将接受新的网格行，并且当其高度增加时，第一行将在高度上拉伸(stretch)以占用Flex容器(黑色边框)的浪费空间用户(.flex 中为 350px，但在实际应用程序中由用户可变)。

我最接近的解决方案是使用grid-template-rows: auto minmax(36px, 36px) minmax(24px, 25px) minmax(24px, 35px);但这需要明确行，而这些在我的应用程序中动态变化。

使用 grid-auto-rows: minmax(min-content, max-content); 行正确呈现，不需要显式定义它们，但无法获取第一行占用使用grid-template-rows:显式定义行并分配auto时所占用的空间。

预先感谢您的帮助

.flex {
  display: flex;
  flex-direction: column;
  height: 350px;
  border: solid;
  justify-content: flex-end;
}

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: minmax(100px, 207px) 1fr;
  grid-auto-rows: minmax(min-content, max-content);
}

.grid>* {
  background-color: green;
  height: 42px;
}

#dgvContainer {
  grid-column: 1/3;
}

#expander {
  grid-column: 2/3;
  background-color: white;
  justify-self: end;
}

<div class="flex">
  <div class="grid">
    <div id="dgvContainer">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div id="expander">Expander</div>
  </div>
</div>

fiddle :

https://codepen.io/andr-s-herrera-the-selector/pen/abJxrjy

Answer 1

请看一下代码片段。添加的样式标记如下。

.flex {
  display: flex;
  flex-direction: column;
  height: 350px;
  border: solid;
  justify-content: flex-end;
}

.grid {
  flex-grow: 1; /* added */
  grid-template-rows: 1fr;/* added */
  display: grid;
  grid-gap: 10px;
  grid-template-columns: minmax(100px, 207px) 1fr;
  grid-auto-rows: minmax(min-content, max-content);
}

.grid>* {
  background-color: green;
  height: 42px;
}

#dgvContainer {
    height: 100%;   /* added */
  grid-column: 1/3;
}

#expander {
  grid-column: 2/3;
  background-color: white;
  justify-self: end;
}

<div class="flex">
  <div class="grid">
    <div id="dgvContainer">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div id="expander">Expander</div>
  </div>
</div>