为什么即使在定义的弹性基础上，我的flex也不会增长？

Question

我希望3个盒子以1：4：1的比例填充屏幕的高度。

＆＃13;

＆＃13;

*{
  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;
  }

＆＃13;

 
 <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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您正在使用百分比高度。这需要您在父元素上定义高度。这很棘手。见这里：Working with the CSS height property and percentage values

相反，只需使用.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; }，这更简单，更容易。

＆＃13;

＆＃13;

<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>

＆＃13;

 ClassA _classA = (ClassA)_classB 

＆＃13;

＆＃13;

＆＃13;