如何使父div高度匹配第一个子div的高度？

Question

情况

我想在仪表板的页面中显示：

• 左侧的统计数字表（当日，提前1周，提前2周...）
• 右侧的图表单元格网格

类似这样的东西：

问题

我希望“左表”确定“图表网格”的“最大高度”，以便如果网格高度超过左表的高度，那么它会在该高度范围内滚动

简化

.container {
  background: red;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.left {
  background: green;
  height: 100px; // example height, is actually dynamic
}

.right {
  background: blue;
  height: 500px;// example height, is actually dynamic
}

<div class='container'>
  <div class='left'></div>
  <div class='right'></div>
</div>

在这里，我希望container占据其left子级的高度，以便right子级溢出并显示滚动条。

我该如何实现？

我正在使用ReactJS，所以我宁愿不使用jQuery