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
  .outer-col-1 {
14
    background: #D7E8D4;
15
    flex: 1;
16
  }
17
  .outer-col-2 {
18
    display: flex;
19
    flex-direction: column;
20
    flex: 5;
21
  }
22
  .inner-row {
23
    display: flex;
24
    flex-direction: row;
25
  }
26
  .inner-col {
27
    flex: 4;
28
  }
29
  .inner-row article {
30
    min-height: 60vh;
31
  }
32
  .inner-row aside {
33
    background: beige;
34
    flex: 1;
35
  }
36
  header, footer {
37
    background: yellowgreen;
38
    height: 20vh;
39
  }
40
  header, footer, article, nav, aside {
41
    padding: 1em;
42
  }
43
</style>
44
<body>
45
  <nav class="outer-col-1">Nav</nav>
46
  <div class="outer-col-2">
47
    <header>Header</header>
48
    <div class="inner-row">
49
      <div class="inner-col">
50
        <article>Article</article>
51
        <footer>Footer</footer>
52
      </div>
53
        <aside>Aside</aside>
54
    </div>
55
  </div>
56
</body>