Flexbox height 100% with fixed header

by kinduff

HTML

<div class="flexbox-parent">
  <div class="header">
    Header
  </div>
  <div class="content">
    <ul class="column">
      <li>sadadasdasd</li>
      <li>sadadasdasd</li>
      <li>sadadasdasd</li>
      <li>sadadasdasd</li>
      <li>sadadasdasd</li>
      <li>sadadasdasd</li>
      <li>sadadasdasd</li>
      <li>sadadasdasd</li>
      <li>sadadasdasd</li>
      <li>sadadasdasd</li>
      <li>sadadasdasd</li>
      <li>sadadasdasd</li>
    </ul>
    <ul class="column">
      <li>sadadasdasd</li>
      <li>sadadasdasd</li>
      <li>sadadasdasd</li>
      <li>sadadasdasd</li>
      <li>sadadasdasd</li>
      <li>sadadasdasd</li>
      <li>sadadasdasd</li>
      <li>sadadasdasd</li>
      <li>sadadasdasd</li>
      <li>sadadasdasd</li>
      <li>sadadasdasd</li>
      <li>sadadasdasd</li>
    </ul>
    <ul class="column">
      <li>sadadasdasd</li>
      <li>sadadasdasd</li>
      <li>sadadasdasd</li>
      <li>sadadasdasd</li>
      <li>sadadasdasd</li>
      <li>sadadasdasd</li>
      <li>sadadasdasd</li>
      <li>sadadasdasd</li>
      <li>sadadasdasd</li>
      <li>sadadasdasd</li>
      <li>sadadasdasd</li>
      <li>sadadasdasd</li>
    </ul>
    <ul class="column">
      <li>sadadasdasd</li>
      <li>sadadasdasd</li>
      <li>sadadasdasd</li>
      <li>sadadasdasd</li>
      <li>sadadasdasd</li>
      <li>sadadasdasd</li>
      <li>sadadasdasd</li>
      <li>sadadasdasd</li>
      <li>sadadasdasd</li>
      <li>sadadasdasd</li>
      <li>sadadasdasd</li>
      <li>sadadasdasd</li>
    </ul>
  </div>
</div>

CSS

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

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

.flexbox-parent {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* align items in Main Axis */
  align-items: stretch;
  /* align items in Cross Axis */
  align-content: stretch;
  /* Extra space in Cross Axis */
  background: #eee;
}

.header {
  height: 100px;
  background-color: #ddd;
}

.content {
  display: flex;
  flex: 1;
}

.column {
  width: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

.column li {
  height: 100px;
  line-height: 100px;
  border-bottom: 1px solid white;
}