flex布局时，出现上一行与下一行之间间距大的问题

最近做项目的时候，使用flex 布局，发现上一行与下一行的间距比较大。具体的代码布局如下所示，

<main v-if="tableData.length" class="flex flex-ai-start flex-wrap">
      <div
        v-for="item in tableData"
        :key="item.id"
        :ruleData="item"
      />
      <div class="info-list-fill mgt15 "></div>
      <div class="info-list-fill mgt15 "></div>
      <div class="info-list-fill mgt15 "></div>
</main>

<style>
    main {
        height: calc(100% - 60px);
        overflow: auto;
    }
</style>

其原因是把这个高度设定死了，flex布局就会根据这个高度去调整行与行之间的间距，当这个tableData的数据较少的时候，就会使行与行之间的间距变得很大，所以根据这个问题，需要调整这个高度，最简单的方法是使用 max-height(100% - 60px)，问题就会解决。