对flex:1的一些思考

      <div class="container">
        <div class="top"></div>
        <div class="bottom"></div>
      </div>

• container 为flex盒子，bottom设置高度，top为flex：1
• 当top里没内容时 bottm高度为父盒子高度，bottom可以把父盒子填充满
• 当top里有内容时，即使container height:200px // bottom height:200px 下边的也填充不满父盒子

原因分析

flex：1//flex-grow：1

实际上分配的是flex盒子内，总高度-所有具有高度的元素后 剩余的高度，把计算得到的剩余高度给补贴到css为flex:1的元素上,并叠加该元素本身具有的高度

只需top设为height:0,flex便可把container的高度减去bottom的高度 赋给top，也就是说，top可以被缩减为0，bottom可以占满整个flex盒子。这在给bottom增加动画时十分重要