Limit flexbox height to browser window (currently it's overflowing causing vertical scroll)

Question

I'm trying to have an app that fit the window size of the browser.

The menu should have a height that fit 100% of the parent and not have a height of 100% of the screen. I have this:

|---------------------------------|
| Header                          |
|---------------------------------|
||-------------------------------||
|| flex                          ||
|||--------------|               ||
||| Menu         |               ||
|||              |               ||
||| 1 item       |               ||
|||              |               ||
|||              |               ||
|||              |               ||
|||              |---------------||
  |              |
  |--------------|

I want

|---------------------------------|
| Header                          |
|---------------------------------|
||-------------------------------||
|| flex                          ||
|||--------------|               ||
||| Menu         |               ||
|||              |               ||
||| 1 item       |               ||
|||              |               ||
|||              |               ||
|||              |               ||
|||              |               ||
|||--------------|---------------||

My code : https://jsfiddle.net/vLbzLtyf/

<div app-context>
     <header>
       <h1>Application</h1>
     </header>

<div class="layout-flex-container row">
<div class="element">
  <aside>
    <h2>Menu</h2>
    <nav>
      <ul>
        <li>
          <span>
                          <i class="material-icons">person</i>
                          <a href="#">John Doe</a>
                      </span>
        </li>
        <li>
          <span>
                          <i class="material-icons">person</i>
                          <a href="#">Paul Smith</a>
                      </span>
        </li>
        <li>
          <span>
                          <i class="material-icons">person</i>
                          <a href="#">Jean Dupont</a>
                      </span>
        </li>
        <li>
          <span>
                          <i class="material-icons">person</i>
                          <a href="#">Xavier Lin</a>
                      </span>
        </li>
      </ul>
    </nav>
  </aside>
</div>

html,
body {
  height: 100%;
}

body {
  margin: 0;
}

div[app-context] {
  height: 100%;
}


/* ************************************************************************** */

.layout-flex-container {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  height: 100%;
}

.layout-flex-container.row {
  flex-direction: row;
}

.layout-flex-container.row .element {
  flex: 0 1 auto;
  height: 100%;
}


/* ************************************************************************** */

header {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
  box-sizing: border-box;
  border: none;
  width: 100%;
  height: 128px;
  margin: 0;
  padding-bottom: 64px;
  z-index: 3;
  background-color: rgb(63, 81, 181);
  color: rgb(255, 255, 255);
}

header > h1 {
  flex: 1;
  box-sizing: border-box;
  margin: 0;
  padding: 0 40px 0 80px;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-size: 20px;
  line-height: 1;
  letter-spacing: .02em;
  font-weight: 400;
}


/* ************************************************************************** */

aside {
  height: 100%;
  width: 340px;
  background: transparent;
  color: #424242;
  z-index: 5;
}

aside > h2 {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
  box-sizing: border-box;
  color: black;
  line-height: 64px;
  padding-left: 40px;
  margin: 0;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-size: 20px;
  letter-spacing: .02em;
  font-weight: 400;
}

aside > nav {
  height: 100%;
  background: #fafafa;
  padding-top: 16px;
  box-sizing: border-box;
}

aside > nav > ul {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: flex-start;
  padding: 8px 0;
  margin: 0;
  list-style: none;
}

aside > nav > ul li {
  box-sizing: border-box;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1;
  min-height: 48px;
  padding: 16px;
  color: rgba(0, 0, 0, .87);
  overflow: hidden;
}

How I can achieve that ?

Answer 1

You need to adjust your height: 100% in two places. Currently, it's combining with additional px heights defined in your code, which is causing the overflow in the browser window.

Instead of this:

.layout-flex-container {
      height: 100%;
}

aside > nav {
      height: 100%;
}

Try this:

.layout-flex-container {
      height: calc(100% - 128px);  /* subtract the defined height of the header element */
}

aside > nav {
       height: calc(100% - 64px);  /* subtract the defined line-height of the h2 element */
}

Revised Fiddle

Learn more about the CSS calc function at W3C:

8.1. Mathematical Expressions: calc()

The calc() function allows mathematical expressions with addition (+), subtraction (-), multiplication (*), and division (/) to be used as component values. The calc() expression represents the result of the mathematical calculation it contains, using standard operator precedence rules. It can be used wherever <length>, <frequency>, <angle>, <time>, <number>, or <integer> values are allowed. (Read more.)

Answer 2

For main containers like these, it's best to use 100vh and 100vw.

Read here about the modern CSS units: http://tutorialzine.com/2015/05/simplify-your-stylesheets-with-the-magical-css-viewport-units/

Don't forget to use inherit as much as possible on children elements (when it works). This way you ensure a proper cascade of height elements.