Why isn't my flex grow working even with a defined flex basis?

Question

I want the 3 boxes to fill the height of the screen in 1:4:1 ratio.

*{
  margin:0;
  padding:0;
}
.container{
  display: flex;
  flex-direction:column;
  align-items: center;
  height:100100%;
  width:100%;
}
.title{
 
  background:yellow;
  flex-basis:30px;
  flex-grow:1;
}
.box{
  background:green;
  flex-basis:120px;
  flex-grow:4;

}

.buttons{
  background:red;
  flex-basis:30px;
  flex-grow:1;
  }

 
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
  <div class="title">
    Random Quote Generator
  </div>
  <div class="box">
    This is Where Author and Quote go.
  </div>
  <p class="blank"></p>
  <div class="buttons">
    <a class="button"><i class="fa fa-twitter"></i></a>
    <a class=button><i class="fa fa-tumblr"></i></a>
    <a class='button'><i class="fa fa-chevron-right"></i></a>
  </div>
</div>

Answer 1

You're using percentage heights. That requires you to define a height on the parent element. It gets tricky. See here: Working with the CSS height property and percentage values

Instead, just use height: 100vh, which is much simpler and easier.

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh; /* NEW */
  width: 100%;
}

.title {
  background: yellow;
  flex: 1 0 30px;
}

.box {
  background: green;
  flex: 4 0 120px;
}

.buttons {
  background: red;
  flex: 1 0 30px;
}

* {
  margin: 0;
  padding: 0;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
  <div class="title">
    Random Quote Generator
  </div>
  <div class="box">
    This is Where Author and Quote go.
  </div>
  <p class="blank"></p>
  <div class="buttons">
    <a class="button"><i class="fa fa-twitter"></i></a>
    <a class=button><i class="fa fa-tumblr"></i></a>
    <a class='button'><i class="fa fa-chevron-right"></i></a>
  </div>
</div>