Element to take remaining height of viewport

Question

Please consider this style:

.root {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.header {
  width: 100%;
  background-color: red;
  display: flex;
  height: 100px;
  justify-content: space-between;
  .logo-pane {
    width: 100px;
    height: 100px;
    background-color: green;
  }
  .user-actions {
    width: 100px;
    height: 100px;
    background-color: blue;
  }
}

.content {
  flex-grow: 1;
  background-color: pink;
}

What I want to achieve is that the content element will take the remaining height of the viewport, but it takes only his content height.

HTML:

<div class="root">
  <div class="header">
    <div class="logo-pane">Logo</div>
    <div class="user-actions">User Actions</div>
  </div>
  <div class="content">
    content
  </div>
</div>

Codepen

Answer 1

The problem is the surrounding .root. You have to increase the height of the .root to the remaining space. So you have to set the height:100vh; on .root. Try the following solution:

body, html {
  margin:0;
  padding:0;
}
.root {
  display: flex;
  flex-direction: column;
  height: 100vh;
  align-items:stretch;
  align-content:stretch;
}
.header {
  width: 100%;
  background-color: red;
  display: flex;
  height: 100px;
  justify-content: space-between;
}
.logo-pane {
  width: 100px;
  height: 100px;
  background-color: green;
}
.user-actions {
  width: 100px;
  height: 100px;
  background-color: blue;
}
.content {
  flex-grow:1;
  background-color: pink;
}

<div class="root">
  <div class="header">
    <div class="logo-pane">Logo</div>
    <div class="user-actions">User Actions</div>
  </div>
  <div class="content">content</div>
</div>