This is an issue I've run into a lot. Well the opposite, when I want overflowing grid cells to gain a scroll bar instead of expanding the parent. Turns out this is only doable if the grid element has an explicitly defined height, which means hard-coding a height like `height: 50vh` or ensuring every ancestor of the grid has `height: 100%` defined, which is pretty gross.
Having `height: 100%` (or `flex: 1` or grid equivalent) on every ancestor is just what you have to do for CSS (it applies to all layout modes, not just grid). My way to make this less painful is generally to remove any extraneous divs and try to keep the trees as shallow as possible.
Yep, it's nice to have an alternative to flex (where children determine their own size with flex-grow / flex-shrink / flex-basis).
> Setting height: 100% was also preventing the grid from expanding. Try this JSFiddle https://jsfiddle.net/c3m2194b/
This is an issue I've run into a lot. Well the opposite, when I want overflowing grid cells to gain a scroll bar instead of expanding the parent. Turns out this is only doable if the grid element has an explicitly defined height, which means hard-coding a height like `height: 50vh` or ensuring every ancestor of the grid has `height: 100%` defined, which is pretty gross.
https://jsfiddle.net/36k1079x/