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: 3;
28
    min-height: 60vh;
29
  }
30
  .content > aside {
31
    background: beige;
32
    flex: 1;
33
  }
34
  header, footer {
35
    background: yellowgreen;
36
    height: 20vh;
37
  }
38
  header, footer, article, nav, aside {
39
    padding: 1em;
40
  }
41
</style>
42
<body>
43
  <nav class="col-1">Nav</nav>
44
  <div class="col-2">
45
    <header>Header</header>
46
    <main class="content">
47
    <article>Article</article>
48
    <aside>Aside</aside>
49
    </main>
50
    <footer>Footer</footer>
51
  </div>
52
</body>