How to make parent div height match height of first child div?

Question

Situation

In a page of our dashboard, I want to show:

• on the left a numeric table of statistics (current day, 1 week earlier, 2 weeks earlier...)
• on the right a grid of chart cells

something like this:

Problem

I want the "left table" to determine the "max height" of the "grid of charts" so that if the grid height exceeds the height of the left table then it scrolls within that height

Simplification

.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>

Here I want the container to take the height of its left child, so that right child overflows and shows a scroll bar.

How can I achieve this?

I am using ReactJS so I would prefer not using jQuery