Gridbox：缩小网格行的内容以形成两个等高的行答案

【问题标题】：Gridbox: Shrink contents of grid row to make two equal height rowsGridbox：缩小网格行的内容以形成两个等高的行
【发布时间】：2021-04-25 17:57:38
【问题描述】：

假设我有一个 4 列和 1 行的网格框。父容器 1 和 2 是该网格框的子容器。父 container1 的 colspan 为 3，而 container2 的 colspan 为 1 列。两个容器都有多个子组件，它们是响应式的并在窗口调整大小时改变大小。子 5 个组件内部有一个表，其中包含超过 250 条记录。目标是使该表格可滚动，具有完全相等的网格框内容高度，并且不知道父容器或子容器的任何尺寸。

所以父容器 2 必须与父容器 1 高度相同，因此必须对子容器 5 进行处理

JSFiddle example

预期布局：（相同的行高和可滚动的表格）

当前布局：（内容高度不等，表格不可滚动）

我尝试在这种情况下实现 flexbox，但它似乎让事情变得更加困难。我还尝试将display: flex 和flex: flex-shrink 添加到child5 容器中，但没有任何结果。

我知道我可以以编程方式获取 container1 的高度并计算 child5 所需的高度，但我觉得使用 CSS 有更优雅的解决方案 + 我不想在调整窗口大小时添加太多事件侦听器。

很想看看你的建议。

【问题讨论】：

寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码，最好是在堆栈片段中。尽管您提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website/example doesn't work can I just paste a link。
欢迎提出任何问题。如果我的回复对您有帮助，您可以将其标记为答案，以简化其他用户以后的搜索。 How accepting of answer works.

标签： html css flexbox css-grid

【解决方案1】：

可以为您的.container1 类应用display: flex 并使用flex 属性：

*, html, body {
    box-sizing: border-box;
    margin: 0;
}

body {
  font-family: sans-serif;
  font-weight: 600;
}
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 5px;
  border: 1px solid black;
  padding: 5px;
}
.container1 {
  grid-column: 1/4;
  background: blue;
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: 1;
}

.container1 div {
  flex: 1;
}

.container2 {
  background: red;
}
.child, .child1, .child3, .child5 {
  border: 1px solid black;
  padding: 15px;
  background: gray
}

.container1, .container2 {
  border: 1px solid black;
  padding: 5px;
}
.table, th, td {
  border: 1px solid black;
  width: 100%;
}
.child1, .child3 {
  padding: 40px 15px 40px 15px;
}
.child5 {
  overflow-Y: scroll;
}

<div class="grid">
    <div class="container1">
      parent container 1
      <div class="child1">
        child 1
      </div>
      <div class="child">
        child 2
      </div>
      <div class="child3">
        child 3
      </div>
    </div>

    <div class="container2">
      parent container 2
      <div class="child">
        child 4
      </div>
      <div class="child5">
        child 5
        <table>
          <tr>
            <th>prop</th>
            <th>value</th>
          </tr>
          <tr>
            <th>prop</th>
            <th>value</th>
          </tr>
          <tr>
            <th>prop</th>
            <th>value</th>
          </tr>
          <tr>
            <th>prop</th>
            <th>value</th>
          </tr>
          <tr>
            <th>prop</th>
            <th>value</th>
          </tr>
          <tr>
            <th>prop</th>
            <th>value</th>
          </tr>
          <tr>
            <th>prop</th>
            <th>value</th>
          </tr>
          <tr>
            <th>prop</th>
            <th>value</th>
          </tr>
          <tr>
            <th>prop</th>
            <th>value</th>
          </tr>
          <tr>
            <th>prop</th>
            <th>value</th>
          </tr>
          <tr>
            <th>prop</th>
            <th>value</th>
          </tr>
          <tr>
            <th>prop</th>
            <th>value</th>
          </tr>
        </table>
      </div>
    </div>
  </div>

【讨论】：