el-table在flex布局下宽度不能自适应的解决方法

问题描述

使用flex布局，使用 flex: 1 后 el-table 只能自适应扩大，不能自适应缩小

问题原因

el-table 组件的宽度是动态计算的，源码中resize事件绑定在 this.$el 上，flex容器下的width:100%会一直向上继承，直到flex容器下第一级子元素，但是当某个子元素的宽度出现固定值并且大于flex伸展的宽度的时候，那么容器就不会收缩，也就触发不了resize事件了。

解决方法1

在右侧区域，即 flex：1；区域 添加 overflow-x：hidden 即可解决。（给表格的父元素加）

<div class="flex-wrapper">
  <div class="left-box">左侧信息</div>
  <div class="right-box">
    <el-table>...</el-table>
  </div>
</div>

.flex-wrapper {
    display: flex;
    justify-content: space-between;
    .left-box {
    flex-shrink: 0;
    margin-right: 16px;
    }
    .right-box {
      flex: 1;
      overflow-x: hidden;
    }
}