Why does the grid blow out in the following snippet? The grid has a lime green border, each child has a dotted red border, and you can see the dotted red extends beyond the lime grid border. The .child2 should be made scrollable to prevent the grid from blowing out.
In terms of finding a solution: I cannot set a fixed height for the .grid-children, as the number of rows varies between 5 or 6. Additionally, the rows are not always the same size, with the first row being taller than the others.
It's worth mentioning that there is no grid gap or margin on the .grid-children, which differs from other proposed solutions.
.grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
height: 100px;
border: solid lime 2px;
}
.grid-child {
display: flex;
flex-direction: column;
height: 100%;
border: dashed red 1px;
}
.child2 {
flex-grow: 1;
overflow-y: auto;
}<div class="grid">
<div class="grid-child">
<div class="child1">
child 1
</div>
<div class="child2">
<div>foo1</div>
<div>foo2</div>
<div>foo3</div>
<div>foo4</div>
<div>foo5</div>
<div>foo6</div>
</div>
</div>
<div class="grid-child">another grid child B</div>
<div class="grid-child">another grid child C</div>
<div class="grid-child">another grid child D</div>
</div>