Элемент прокрутки внутри элемента fill-height

Question

Мне нужно создать веб-макет с заголовком и основной областью.Высота заголовка будет расти вместе с его содержимым, а основная область будет заполнять оставшееся вертикальное пространство.Круто, это легко сделать с помощью flex или grid.НО!Внутри основной области мне нужен еще один элемент (назовем его плохим парнем), который может содержать много контента, и мне нужно его прокручивать, а не растягивать основную область за нижнюю границу моей страницы.

Для основной области я пробовал согнуть с flex-grow: 1 или строкой сетки с размером auto.Но поскольку такие элементы не имеют определенной высоты, плохой парень всегда растягивает основной элемент, поэтому переполнения нигде не происходит.

Мой HTML:

<div class="app">
  <header></header>
  <main>
    <div class="badboy"></div>
  </main>
</div>

Расположение:

Если бы только я мог зафиксировать высоту заголовка на определенной высоте, я мог бы использовать calc, чтобы точно установить высоту основной областии проблема решена.Но мой заголовок должен расти вместе с контентом.Уже есть подобный вопрос здесь , говорящий, что это невозможно, но ему 5 лет, и с тех пор CSS прошел долгий путь.

Answer 1

Хорошо, поэтому, покопавшись еще немного, я придумал это решение с сеткой CSS.Я не знаю, является ли это случайным или просто обычным делом, но, похоже, это работает.

.app {
  width: 100vw;
  height: 100vh;
  grid-template-columns: 100%;
  grid-template-rows: fit-content(1px) minmax(1px, auto);
  display: grid;
}

header {
  background: lightgray;
}

main {
  background: gray;
}

.badboy {
  max-width: 40rem;
  margin: 0 auto;
  max-height: 100%;
  overflow-y: auto;
  background-color: white;
}