利用饿了么布局标签，做了n行四列的迷你表格，表格固定高度260px，有些高度不够下面有空白，如何能够让表格缺补上去？

Question

当每一个表格获取到数据后，数据量大时可以自动滚动展示，但是数据量少可见展示小于260px时，下面就会有空白。这样不同高度表格的排布就会形成很多洞洞，如下图，高度不够时如何让其余表格补到空白处呢？

排布布局，，，问题就是布局已经固定，怎么才能实现空白处让其余表格自动补上
<el-row :gutter="20">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <StationOne></StationOne>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <StationTwo></StationTwo>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <StationThree></StationThree>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <StationFour></StationFour>
            </div>
          </el-col>
</el-row>

css

.wrapper {
  width: 100%;
  max-height: 270px;
  overflow: auto;
  margin-bottom: 5px;

  // border: solid 1px #6b6b6b;
  // height: 40px;
  .table-col {
    border-bottom: solid 1px #eaf2f8;
    height: 40px;
    display: flex;
  }

  .table-item:not(:last-child) {
    border-right: solid 1px #eaf2f8;
  }

  // .table-col {}

  .table-item {
    height: 100%;
    display: flex;

    >div {
      display: flex;
    }

    .label {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50%;
      text-align: center;
      color: #201f1f;
      background-color: #2a2929;
      color: #f2f9fc;
      font-weight: bold;
    }

    .green {
      background-color: green;
    }

    ::v-deep .red {
      background-color: red;
    }

    .darkblue {
      background-color: #0421f9;
    }

    .value {
      display: flex;
      width: 50%;
      align-items: center;
      justify-content: center;
      word-wrap: break-word;
      color: #222;
      font-size: 14px;
      font-weight: bold;
      flex: 1;
      background-color: #5e5e5e;
    }
  }
}

Answer 1

 max-height: 260px;

这样应该可以满足你的要求