1
<!doctype html>
2
<title>Example</title>
3
<style>
4
  * {
5
    box-sizing: border-box;
6
  }
7
  body {
8
    display: flex;
9
    min-height: 100vh;
10
    flex-direction: row;
11
    margin: 0;
12
  }
13
  .col-1 {
14
    background: #D7E8D4;
15
    flex: 1;
16
  }
17
  .col-2 {
18
    display: flex;
19
    flex-direction: column;
20
    flex: 5;
21
  }
22
  .content {
23
    display: flex;
24
    flex-direction: row;
25
  }
26
  .content > article {
27
    flex: 4;
28
    min-height: 60vh;
29
  }
30
  header, footer {
31
    background: yellowgreen;
32
    height: 20vh;
33
  }
34
  header, footer, article, nav {
35
    padding: 1em;
36
  }
37
</style>
38
<body>
39
  <nav class="col-1">Nav</nav>
40
  <div class="col-2">
41
    <header>Header</header>
42
    <main class="content">
43
    <article>Article</article>
44
    </main>
45
    <footer>Footer</footer>
46
  </div>
47
</body>