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

Question

我需要创建一个带有页眉和主要区域的网页布局。标题的高度将随着内容的增加而增长，主要区域将填充剩余的垂直空间。很酷，这很容易用 flex 或 grid 完成。但!在主要区域中，我需要另一个元素(让我们称他为 badboy)，它可以包含很多内容并且我需要它滚动，而不是将我的主要区域延伸到页面的下边框之外。

对于主要区域，我尝试使用 flex-grow: 1 或 grid row 大小为 auto 进行 flex。但是由于这些元素没有特定的高度，所以 badboy 总是会拉伸(stretch)主要元素，因此不会在任何地方发生溢出。

我的 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;
}