Flexbox inner div height problem

by Florian B

HTML

<div id="wrapper">
    <div id="first">
      Header
    </div>
    <div id="second">
      <div id="should-fill">
        Contents
      </div>
    </div>
    <div id="third">
      Just waht it takes<br/>Not any more
    </div>
    <div id="fourth">
      Fodas-ter
    </div>
</div>

CSS

html, body {height:100%; margin:0; padding:0;}
#wrapper {
  width:300px;
  height:100%;
  display: flex; /* or inline-flex */
  flex-direction: column;
}

#wrapper div {
}

#first {
  background-color: #f00;
  height: 50px;
  flex: none; /* none = no grow + no shrink */
}

#second {
  background-color: #ff0;
  flex: auto; /* auto = grow + shrink */
}

#should-fill {
  background-color: #ff8;
  width: 100%;
  height: 100%;
}

#third {
  background-color: #0f0;
  flex: initial;
}

#fourth {
  background-color: #0ff;
  flex: none;
  height: 50px;
}