左树右表结构，el-table内容溢出元素框时不出现横向滚动条问题

项目需求是一个左树右表的结构,但是el-table内容太多溢出，横向滚动条不显示，如图：

问题原因：

对比了其它布局，发现只有flex布局下并且自适应了宽度才会出现这种问题。

当时的css：

// 外面大盒子
.app-container {
  background: #fff;
  display: flex;
  // 左边树形结构小盒子
  .left {
    margin-top: 20px;
    width: 300px;
    padding: 20px;
    border-right: 1px solid #eaeef4;
  }
  // 右边el-table小盒子
  .right {
    flex: 1;
    padding: 20px;
  }
}

-解决办法：
flex布局不变，flex: 1换成css3提供的动态计算属性 calc，代码如下：

// 外面大盒子
.app-container {
  background: #fff;
  display: flex;
  // 左边树形结构小盒子
  .left {
    margin-top: 20px;
    width: 300px;
    padding: 20px;
    border-right: 1px solid #eaeef4;
  }
  // 右边el-table小盒子,使用calc时 '-' 两边都要有空格
  .right {
    width: calc(100% - 300px);
    padding: 20px;
  }
}

这样就解决了：