CSSのみでブラウザーのサイズに応じてコンテンツエリアを調整する方法をご教示いただきたいです。

前提・実現したいこと

HTML, CSS（SCSS）を使って、ブラウザーをスクロール無しで１画面で全てが見れるようなページを作っています。

添付画像のようにHeaderの大きさは固定でブラウザーのサイズに合わせてBox（div）の大きさを変更したいと思っているのですが、なかなか上手くCSSが書けません。

Javascriptを用いると可能なのは承知なのですが、CSSのみで実現したいと考えています。可能でしょうか？

該当のソースコード

CSS
1html, body {
2    height: 100vh;
3    box-sizing: content-box;
4    margin: 0;
5}
6
7.header {
8    position: relative;
9    height: 100px;
10    width: 100%;
11    background-color: brown;
12    overflow: auto;
13}
14
15.content {
16    background-color: aqua;
17    width: 100%;
18    overflow: auto;
19　　 top: 0;
20    bottom: 0 -> 画面の下までコンテンツエリアが伸ばせたら理想的なのですが方法はありますか？
21}
22
23.box {
24    background-color: blueviolet;
25    margin: 2rem;
26}

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Document</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <div class="header">
11        <h1>ヘッダー </h1>
12    </div>
13    <div class="content">
14        <h1>コンテンツ</h1>
15        <div class="box">
16            <h1>ボックス</h1>
17        </div>
18    </div>
19</body>
20</html>