Table组件在flex布局下面宽度会自动无限增加的问题

遇到问题

公司一个后台管理系统任务，技术栈使用vue+iview。在写如下效果时，使用flex布局时，遇到了问题。左边已经写死宽度，右边flex:1,拉升浏览器，右边div一直滑动的情况。

vue代码

<template>
	   <Card>
      <div class="main-container">
        <tree-combox
          class="tree-container"
          @checkChange="checkChange"
          @selectChange="selectChange"
        />
        <tables
          class="main-center"
          :handleType="handleType"
          ref="tables"
          :loading="loading"
          :data="tableData"
          :columns="columns"
          :current="current"
          :pageSize="pageSize"
          :total="total"
          @getList="getList"
          @pageCurrentChange="pageCurrentChange"
          @pageSizeChange="pageSizeChange"
          @addItem="addItem"
        >
          <template slot="search">
            <Form :model="searchData" :label-width="80">
              <FormItem label="关键字">
                <Input v-model="searchData.keyword" placeholder="输入关键字" />
              </FormItem>
            </Form>
          </template>
        </tables>
      </div>
    </Card>
</template>
<script>
import Tables from "_c/tables";
import TreeCombox from "_c/tree-combox";

</script>
<style lang="less" scoped>
.main-container {
  display: flex;
  flex-direction: row;
  .tree-container {
    width: 250px;
  }
  .main-center {
    padding-left: 10px;
    box-sizing: border-box;
    
    flex:1;
  }
}
</style>

网上文章答案有问题，这样写是不好的

问题解决方案

main-center多加入一个属性overflow:auto;

<style lang="less" scoped>
.main-container {
  display: flex;
  flex-direction: row;
  .tree-container {
    width: 250px;
  }
  .main-center {
    padding-left: 10px;
    box-sizing: border-box;
    overflow:auto;
    flex:1;
  }
}
</style>

完成效果

完美解决Bug，并且table自适配宽度效果依然完好，亲测完美解决，没有副效果。