css上半部分自适应高度，下半部分自动填充竖向排列

把一个页面一份成2部分，上面的表单不是固定的，所以不能设置固定盖度，但是下面还需要填充满。我碰到的问题是下面没有填充满，出来补个div白色背景这与我想要的效果不一样

弹性盒的功能很强大，思路就是一个大盒子包含2个小盒子，给大盒子设置成弹性盒，然后给上半部分用flex-shrink，下面用flex-grow就解决啦~~~

上代码，哈哈哈哈

/* 外面盒子 */
.app{
  height: calc(100vh - 50px);
  display: flex; // 重点
  flex-direction: column; // 重点
}
/* body上部 */
.app-top{
  background-color: #F5F6FA;
  flex-shrink: 0; // 重点
  .app-inner{
    padding: 2%;
    background-color: #ffffff;
    border-radius: 0 0 50px 0;
  }
}
/* body下部 */
.app-bottom{
  padding: 2%;
  background-color: #F5F6FA;
  border-radius: 50px 0 0 0;
  flex-grow: 1;  // 重点
  display: flex;
  flex-direction: column;
}