css flex布局 如何上下固定，中间保存100%？

Question

中间需要用100%高度，但是不懂怎么实现

Answer 1

<style>
  .flex {
    display: flex;
    flex-direction: column;
    height: 100vh
  }
  .flex-item {
    flex: 1;
    overflow: auto;
  }
</style>
<div class="flex">
  <div>top</div>
  <div class="flex-item"></div>
  <div>bottom</div>
</div>