In CSS Grid, why do explicit rows not render if the overall space exceeds 100% of the parent?

Question

Using CSS Grid, I am trying to create a grid that (sometimes) takes more than 100% of the containing element's height. How can this be achieved?

When creating 3 rows that together take 100%, the explicit grid is shown just fine:

https://codepen.io/tommedema/pen/dKqwrZ?editors=1100#0

However, if prior rows take more than 100%, the third row is suddenly gone, even though it is explicitly defined:

https://codepen.io/tommedema/pen/jKvdOO?editors=1100#0

Note that there is no scrollbar going 40% (140 - 100) further down, which I would have expected there to be.

Updated question

When explicitly defining grid-row from the first to last row to at least one child, the overflow (and scrollbar) does show. This is surprising, as I would expect it to overflow without such statement too:

New CSS:

html, body {
  height: 100%;
}

body {
  background-color: #ddd;

  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 20% 100% 20%;
}

/* 
  allows for row overflow to not be cropped
  see also https://stackoverflow.com/questions/51048661
*/
body::after {
  content: "";
  grid-row: 1 / -1;
}

https://codepen.io/tommedema/pen/MXqRPW?editors=1100#0

Even more surprising, when you put a grid inside this grid with the same setup, the ::after trick does not work for this inner grid.

Answer 1

It's because you've limited the height of the container to a fixed 100%. The overflow is clipped.

In addition, percentage heights don't work as expected with grid rows (see note below).

For a simpler and stronger solution use vh units.

body {
  background-color: #ddd;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 20vh 100vh 20vh;
}

revised codepen 1

From the CSS Grid specification, with regard to grid-template-columns and grid-template-rows:

If the size of the grid container depends on the size of its tracks, then <percentage> must be treated as auto.

So if you release the fixed height and use, let's say, min-height: 100% on the container, then your 20% 100% 20% determine the height of the container, compute to auto as a result and, per the auto algorithm, resolve to three equal height rows.

revised codepen 2