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

Question

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

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

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