I am trying to make the navigation stay within the boundaries of the wrapper. The navigation is inside a wrapper with 100% height, and I want the navigation to fill the remaining height. Naturally I used 100% on the navigation as well, but then it sticks out of the `div`. What am I doing wrong?

```css
body {
  background: blue;
  background-size: cover;
  font: 14px "Roboto", sans-serif;
  font-weight: 300;
  padding: 0;
  margin: 2% 4%;
}

* {
  box-sizing: border-box;
}

.wrapper {
  background: #fff;
  display: flex;
  flex-flow: row wrap;
  height: 100vh;
  border-radius: 5px;
}

.header {
  display: flex;
  flex-flow: row;
  height: 75px;
  width: 100%;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background: purple;
}

.box {
  padding: 10px;
  height: 100%;
}

.box:last-child {
  sborder-bottom: 2px solid #EBEBEB;
  sswidth: 100%;
}

.box:first-child {
  width: 223px;
  sborder-right: 2px solid #EBEBEB;
}

.main {
  padding: 10px;
  order: 2;
  height: 100%;
}

.side {
  border-bottom-left-radius: 5px;
  background: #292F32;
  color: #6B757D;
  padding: 10px;
  flex: 0 0 223px;
  order: 1;
  height: 100%;
}

/*# sourceMappingURL=style.css.map */
```

```html
<body>
  <div class="wrapper">
    <div class="header">
      <div class="box">
        intersect
      </div>

      <div class="box">
        rest
      </div>
    </div>

    <div class="side">
      navigation
    </div>

    <div class="main">
      main content
    </div>
  </div>
</body>
```