flex fill vertical space

Fills remaining vertical space evenly using flex. Key is using flex grow and flex basis with parent at 100% height.

by johntrepreneur

HTML

<!DOCTYPE html>
<html>
<body>
<div class="flex-container">
  <div class="div1">1</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
</div>
</body>
</html>

CSS

html,body {
  height: 100%;
  background-color: lightgreen;
  margin: 0;
}
.flex-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.div1, .div2, .div3 {
  flex: 1 0 auto;
  background-color: lightblue;
  border: 1px solid red;
  
}