fixed height for flexbox item

Question

I want to make a full-height frame without scrollbars for the page itself. That's why I've set the height of the wrapper to 100vh. Like I said, I don't want a scrollbar for the whole page.

If I add some more content to the menu-div or content-div, they stretch out. I want them to "hold" their height, and if more content is added, I want them to get scrollbars. So I want a frame where every div (header, body and footer) are in the view of the browser. I want an overflow-y on the menu-div and/or content-div if more content is added.

For now, I fix this with some JavaScript code but I hope/think there is a css-only solution.

Lets say (this is not the case this is just an example) the header has a height of 10% and the footer has a height of 15%. 100% (browser window height) - 10% - 15% = 75%. I want the body-div to be exactly 75% and I don't want it to get stretched out when more content is added.

I hope you all understand my question, I found it quite difficult to write down because English is not my native language.

* {
  margin: 0;
  padding: 0;
}

.wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
}

.header {
  flex: 0 0 auto;
  background: red;
}

.body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
}

.menu {
  flex: 0 0 20%;
  background: yellow;
}

.content {
  flex: 0 0 80%;
  background: blue;
}

.footer {
  flex: 0 0 auto;
  background: green;
}

<div class="wrapper">
  <div class="header">HEADER</div>
  <div class="body">
    <div class="menu">
      <ul>
        <li>Menu item #1</li>
        <li>Menu item #2</li>
        </li>
    </div>
    <div class="content">
      CONTENT GOES HERE
    </div>
  </div>
  <div class="footer">FOOTER</div>
</div>

(I've added some background colors to make it more visible).

Here is a JSFiddle: http://jsfiddle.net/f9gb0qLn/2/