В CSS Grid почему явные строки не отображаются, если общее пространство превышает 100% родительского?

Question

Используя CSS Grid, я пытаюсь создать сетку, которая (иногда) занимает более 100% высоты содержащего элемента. Как этого достичь?

При создании 3 строк, которые вместе принимают 100%, явная сетка отображается очень хорошо:

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

Однако, если предыдущие строки занимают более 100%, третья строка внезапно исчезает, даже если она явно определена:

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

Обратите внимание, что полоса прокрутки не идет на 40% (140-100) дальше вниз, что я и ожидал.

Обновленный вопрос

При явном определении grid-row от первой до последней строки хотя бы для одного дочернего элемента переполнение (и полоса прокрутки) действительно отображаются. Это удивительно, поскольку я ожидаю, что оно переполнится и без такого утверждения:

Новый 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

Еще более удивительно, когда вы помещаете сетку в эту сетку с такой же настройкой, уловка ::after не работает для этой внутренней сетки.

Answer 1

Это потому, что вы ограничили высоту контейнера до 100%. Переполнение ограничено.

Кроме того, процентная высота не работает должным образом со строками сетки (см. Примечание ниже).

Для более простого и надежного решения используйте vh единиц.

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

пересмотренная кодовая ручка 1

Из спецификации CSS Grid , относительно grid-template-columns и grid-template-rows:

Если размер контейнера сетки зависит от размера его дорожек, тогда <percentage> должно рассматриваться как auto.

Итак, если вы отпустите фиксированную высоту и используете, скажем, min-height: 100% на контейнере, тогда ваш 20% 100% 20% определит высоту контейнера, в результате вы получите auto и, согласно auto алгоритм , разрешение до трех строк одинаковой высоты.

пересмотренный кодовый блок 2