CSS Grid: dynamic row height from child

Question

I have a page structured as follows.

html:

<div id="container">
    <div id="child1">
        Some dynamic content
    </div>
    <div id="child2">
        Some much longer dynamic content
    </div>
</div>

css:

.container {
    display: grid;
    grid: 
        "child1 child2";
}

.child1 {
    grid-area: child1;
}

.child2 {
    grid-area: child2;
    overflow-y: scroll;
}

Right now this still expands vertically to the full height of child2. I can give child2 a max-height but that breaks down if child1 grows/shrinks. How can I base the height of the row on specifically the first child?