div 第一个子元素适应内容高度，第二个子元素填充剩余高度。

父元素 100% 高度

<div id="main">
  <div class="A"> 头部DIV </div>
  <div class="B">
    下部DIV
    <!-- <div v-for="(item,index) in circulation" :key="item"> 下部DIV </div> -->
  </div>
</div>

#main {
  width: 100%;
  height: 100%;
  display: flex;
  /*  主轴为垂直方向，起点在上沿。 */
  flex-direction: column;
  /* overflow: hidden; */
  overflow: auto;
}

.A {
  background-color: #85d989;
  overflow: auto;
  /*用于固定高度的情况*/
  /* 空间不足时不会缩小 */
  flex-shrink: 0;
  /*第3个坑*/
}

.B {
  background-color: #cc85d9;
  /* overflow: auto; */
  /* 如果所有项目的 flex-grow 属性都为 1 则他们等分剩余空间*/
  /* 默认为0，即如果存在剩余空间，也不放大 */
  flex-grow: 1;
}

参考：
flex方法
有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度
CSS解决高度自适应问题