Limit Flexbox Height To Browser Window (currently It's Overflowing Causing Vertical Scroll)

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 thi

Solution 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.)

Solution 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.