Gridbox: Shrink contents of grid row to make two equal height rows - html

Question

Assume I have a gridbox with 4 columns and 1 row. Parent container 1 & 2 are children of this gridbox. Parent container1 has a colspan of 3 and container2 has a colspan of 1 column. Both container have multiple child components, that are responsive and change size on window resize. Child 5 components has a table inside, that contains over 250+ records. The goal is to make this table scrollable, with perfectly equal content height of gridbox and without knowing any dimensions of parent or child containers.
So parent container2 has to be same height as parent container1, therefore something has to be done with child5
JSFiddle example
Expected layout: (Same row height and scrollable table)
Current layout: (Unequal content height, table is not scrollable)
I tried implementing flexbox for this scenario, but it seemed to make things harder. I also tried adding display: flex and flex: flex-shrink to the child5 container but with no results whatsoever.
I know I can programmatically take the height of container1 and calculate the needed height of child5 but I feel like there's more elegant solution using CSS + I don't wanna add too much event listeners on window resize.
Would love to take a look at your suggestions.

Answer 1

It is possible to apply display: flex for your .container1 class and use flex property:
*, 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>