While designing grids, there is a peculiarity I've observed which I can't explain, or find a clear-cut reason for in the grid spec. Consider a layout with nested grids, with the parent grid having a row with height defined in fr units. This flexible-sized row contains the child grid which contains one row with a percent-based height (say 100%). This row contains a content cell which can have a lot of content which can overflow, thus we need to show scrollbar for this content cell.
For the content cell to have a scrollbar, I find myself needing to add the overflow: auto property not just to the content cell, but also to the child-grid cell (content div's parent). Nothing else works to give me a scrollable div.
Some more things I've tried:
1. setting height: 100% on the content cell doesn't work. I think it's probably because the parent-grid's row is fr sized, so the height is computed dynamically (somewhat like height: auto), thus any child div can't use percent-based heights.
2. setting the max-height property on the child-grid. It feels logically right, it would simply calculate the height from the parent grid and not overflow that. But even this doesn't work.
I made this small example to illustrate what I mean to say:
https://codepen.io/kumarharsh/pen/qQmwQB
.parent-grid {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 100%;
height: 100px;
border: 2px solid #f00;
}
.child-grid {
display: grid;
grid-template-rows: 100%;
grid-template-columns: 100%;
background-color: red;
overflow: auto;
}
.content {
background-color: grey;
overflow: auto;
}
.no-overflow-auto {
overflow: initial;
}
.height-100 {
height: 100%;
}
.max-height-100 {
max-height: 100%;
}
.data {
padding: 1em;
}
p {
background-color: #ccc;
padding: 1em;
margin-top: 0;
}<div class="parent-grid">
<div class="child-grid">
<div class="content">
<div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div>
</div>
</div>
</div>
<p>What I'm trying to achieve. All lorem ipsum should be bound by the grey box and red border</p>
<div class="parent-grid">
<div class="child-grid">
<div class="content no-overflow-auto">
<div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div>
</div>
</div>
</div>
<p>lorem ipsum exceeds the grey box but not the border (content - overflow:initial)</p>
<div class="parent-grid">
<div class="child-grid no-overflow-auto">
<div class="content"><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div>
</div>
</div>
</div>
<p>lorem ipsum exceeds the grey box and red border (child-grid - overflow:initial)</p>
<div class="parent-grid">
<div class="child-grid no-overflow-auto max-height-100">
<div class="content">
<div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div>
</div>
</div>
</div>
<p>Child-grid - max-height:100%</p>
<div class="parent-grid">
<div class="child-grid no-overflow-auto max-height-100">
<div class="content height-100">
<div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div>
</div>
</div>
</div>
<p>Content - height:100%</p>All the grids are exactly the same, but the second grid doesn't have an overflow:auto applied to the content cell, the third one doesn't have an overflow:auto on the child-grid, the fourth one has height:100% applied to the content div and last one has max-height:100% applied to the child-grid.
So it feels like the overflow:auto of the child-grid is just there to force-set a definite height for the content div so that scrollbars appear. But this is just a conjecture.
Can someone explain why it's necessary to specify overflow:auto on both the child-grid and content in such a layout?
