Understanding flex layouotss

Re creating a Goolge Inbox like layout using CSS Flexbox.

by kshep92

HTML

<div class="header">
  <div class="menu-area">
    <a href="#">Home</a>
  </div>
  <div class="middle">Middle</div>
  <div class="controls">Controls</div>
</div>
<div class=body>
  <nav>
    <div class="navigation"></div>
  </nav>
  <main>
    <p>Some Content</p>
  </main>
</div>

CSS

* {
  box-sizing: border-box;
}

.header {
  display: flex;
  align-items: center;
}

.header > * {
  border: 1px solid;
  padding: 10px;
}

.menu-area {
  width: 20%;
}

.menu-area a {
  display: block;
  padding: 8px 16px;
}

.menu-area a:hover {
  background: pink;
}

.middle {
  flex: 1;
}

.body {
  height: 400px;
  display: flex;
}

nav {
  border: 1px solid navy;
  width: 20%;
}

.navigation {
  width: 100px;
  height: 100%;
  border: 2px dashed pink;
}

main {
  border: 1px solid maroon;
  flex: 1;
}

main > p {
  height: 40px;
  background-color: papayawhip;
  width: 80%;
  
}