关于elementui中table的问题，如何解决？

我想让这个表格自动占满剩余空间，但是试了很多table都占不满下面剩余空间，我用了更多数据后表格只会向下超出屏幕

<template>
  <div style="display: flex;flex-direction: column;">
    <div style="margin: 4px 4px 2px 4px;height: 44px;font-size: 16px;">
      <span>设备类型：span>
      <el-select v-model="deviceType" placeholder="请选择" clearable style="width: 220px;">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        el-option>
      el-select>
    div>
    <div style="display: flex;justify-content: space-between;margin: 4px 4px 2px 4px;height: 44px;font-size: 16px;">
      
      <div style="display: flex;flex-direction: row;align-items: center;">
        <span style="width: 80px;">设备名称：span>
        <el-input v-model="searchModle.device_name" placeholder="请输入内容" style="width: 220px;">el-input>
        <span style="width: 80px;margin-left: 4px;">规格型号：span>
        <el-input v-model="searchModle.standard_model" placeholder="请输入内容" style="width: 220px;">el-input>
        <el-button style="margin-left: 10px;" size="medium" type="primary">搜索el-button>
      div>
      
      <div>
        <el-button type="primary">添加库存el-button>
      div>
    div>
    <div style="flex: 1;margin: 2px 4px 0 4px;height: 100%">
      <div>
        <el-table
          ref="table"
          :data="columnData.data"
          :highlight-current-row="highlightCurrentRow"
          style="width: 100%;height: 100%;border-color: #c0c0c0;"
          row-key="id"
          border
          default-expand-all
          :cell-style="{borderColor:'#C0C0C0'}"
          :header-cell-style="{borderColor:'#C0C0C0',background:'#CDCDC1',color:'#606266',textAlign:'center'}"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <el-table-column
            v-for="(column,item) in columns"
            :prop="column.prop"
            :label="column.title"
            :key="item">
          el-table-column>
          <el-table-column label="操作"  fixed="right" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small">编辑el-button>
            template>
          el-table-column>
        el-table>
      div>
      <div class="block" style="text-align: right;height: 40px;background: #CDCDC1;">
        <el-pagination
          style="margin: 4px 4px 0 0;"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="3"
          layout="total, sizes, prev, pager, next, jumper"
          :total="200">
        el-pagination>
      div>
    div>
  div>
template>

// 数据少的情况

// 数据多的情况

el-table有一个height属性，可用于设置表格的固定高

• 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7793468
• 这篇博客也不错, 你可以看下解决ElementUI中table组件无法正常加载数据的问题

给表格加一个最小高度