CSS сетки, как расширить элемент занимают оставшееся пространство или прокрутить, если слишком большой?

Question

Цель состоит в том, чтобы создать страницу, которую расширяет высота основного содержимого до оставшейся высоты страницы, но не должна превышать видимую область . Вместо этого он должен максимально развернуться и начать вертикальную прокрутку вместо .

Возможно ли это в сетке CSS без использования max-height: 80vh, например? Я не всегда знаю, какой должна быть максимальная высота. (.app-main - это большой контент, который должен расширяться, но ограничиваться на оставшейся высоте, а затем начинать прокрутку по вертикали.)

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-row-gap: 1em;
  height: 100vh;
}

.app-main {
  height: 1800px;
  background-color: yellow;
  overflow-y: auto;
}

<header>
  <h1>Header</h1>
</header>
<section class="app-main">
  <p>
    my large content
  </p>
</section>
<footer>
  <h2>Footer</h2>
</footer>

Answer 1

Установка высоты на дочерних секциях позволит добиться того, что вы хотите. Например:

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-row-gap: 1em;
  height: 100vh;
}

.app-main {
  height: 100%;
  background-color: yellow;
  overflow-y: auto;
}

.app-main p {
  height: 1200px;
}