100% Height without scrollbars (parent and nested childs with flexbox)

Question

I like to 100% height without any scrollbars. In my example the browser seems to calculate the entire height. How the child get 100% height of parent element.

html

<div class="wrapper">
<div class="header"></div> //<- Here is the problem
<div class="content">
    <div class="element">
       <div class="element-child1"></div>
       <div class="element-child2"></div>
    </div>
<div/>

css

  html, body, .wrapper {
    width: 100%;
    height: 100%;
    margin: 0;
  }

  .wrapper {
    display: flex;
    flex-direction: column;
  }

  .wrapper > .header {
    flex: 0 0 40px;
    background-color: black;
  }

  .wrapper > .content {
    align-self: stretch;
    flex: 1;
    background: red;
  }

  .element {
     align-self: stretch;
     display: flex;
     flex-direction: column;
     background-color: yellow;
  }

  .element-child1 {
     flex: 0 0 20px;
     background-color: blue;
  }

  .element-child2 {
     flex: 1;
     background-color: green;
  }

Example with scrollbars: http://jsfiddle.net/zyYPv/

Answer 1

You should be able to make use of the flex-grow property:

HTML

<div class="wrapper">
    <div class="header"></div>
    <div class="content">
        <div class="element-child1"></div>
        <div class="element-child2"></div>
    <div/>
</div>

Css

html, body, .wrapper {
    width: 100%;
    height: 100%;
    margin: 0;
}

.wrapper {
    display: flex;
    flex-direction: column;
}

.wrapper > .header {
    flex: 0 0 40px;
    background-color: black;
}

.wrapper > .content {
    flex-grow: 1;    
    display: flex;
    background: red;
    flex-direction: column;
}

.element-child1 {
    flex: 0 0 20px;
    background-color: blue;
}

.element-child2 {
    flex-grow: 1;
    background-color: green;
}

flex-grow example

Alternatives

calc example

display:table example

Answer 2

Demo Fiddle

CSS

  html, body, .wrapper {
      width: 100%;
      height: 100%;
      margin: 0;
      padding:0;
  }
  .wrapper > .header {
      height: 40px;
      background-color: black;
  }
  .content {
      position:absolute;
      top:40px;
      bottom:0;
      background: red;
      width:100%;
  }
  .element {
      height: 100%;
      background-color: yellow;
  }
  .element-child1 {
      height: 20px;
      background-color: blue;
  }
  .element-child2 {
      background-color: green;
      position:absolute;
      top:20px;
      bottom:0;
      width:100%;
  }