如何使部分可滚动并且与页面的其余部分一样高？

我的页面结构如下：

+-----------------------------------------+
|                 Header                  |
+----------+------------------------------+
| Sidebar  | Content                      |
|          |                              |
|          |                              |
|          |                              |
+----------+------------------------------+

我希望整个页面与视口一样高，即 height: 100vh;

问题是我希望“内容”部分的高度与填充页面所需的高度相同，但要同时滚动（以防其子节点过高）。

一种简单的解决方案是将“内容”的高度设置为，calc(100vh - height_of_header)但是令人遗憾的是，由于标题的高度并不总是恒定的，因此这是无法讨论的。

我尝试height: -webkit-fill-available在“内容”部分进行设置，但这没有用（很奇怪，它的效果与相同height: 100%）

我正在考虑使用JS解决此问题，但我希望看到仅CSS解决方案。

我希望不需要的解决方案，display: grid但也可以！谢谢！:)

这是我制作的Codepen，以防万一。