滚动填充高度元素中元素

Question

我需要用头和主区域中创建一个web布局。头部的高度将其内容和成长的主要区域，将填补剩余的垂直空间。酷，这是很容易要么使用Flex或网格来完成。但！里面的主要区域，我需要另一个元素（让我们叫他BADBOY），它可以有很多内容，我需要它滚动，不舒展我的主要区域超出了我的页面的下边界。

主区我试图用弯曲或flex-grow: 1网格行与大小汽车。但是，由于这样的元素没有一个特定的高度，始终BADBOY延伸的主要因素所以没有溢出发生的任何地方。

我的HTML：

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

布局：

如果我能解决这个标题的高度，以一个特定的高度，我可以用calc来设置的主区域的准确，问题就解决了高度。但我的头需要与内容增长。已经有类似的问题here说其是不可能的，但它是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;
}