填充高度元素内的滚动元素

Question

我需要创建一个带有标题和主区域的Web布局。页眉的高度将随其内容而增加，并且主区域将填充剩余的垂直空间。太酷了，这可以通过flex或grid轻松完成。但！在主要区域内，我需要另一个元素（我们称其为badboy），该元素可以包含很多内容，并且需要滚动它，而不是将主要区域延伸到页面下边框之外。

对于主区域，我尝试使用flex-grow: 1进行flex调整，或者使用大小为auto的网格行进行调整。但是由于此类元素没有特定的高度，因此坏男孩总是拉伸主要元素，因此任何地方都不会发生溢出。

我的HTML：

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

布局：

如果只能将标头的高度固定为特定高度，则可以使用calc来精确设置主区域的高度，从而解决了问题。但是我的标题需要随着内容的增长而增长。 here已经有一个类似的问题，说这是不可能的，但是它已经有5年历史了，自那时以来CSS已经走了很长一段路。

Answer 1

好的，因此，通过深入研究，我提出了使用CSS网格的此解决方案。我不知道这是hacky还是普通的东西，但这似乎有用。

.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;
}