记一次el-table内容溢出元素框时不出现滚动条问题

最近，博主在使用elementui实战时遇到了一件怪事。首先，先看下博主的浏览器窗口最大化截图：

再看一下缩小之后的截图：

博主的表用使用的是elementui的el-table标签，发现此时的表格内容已经溢出了元素框，但是并没有出现滚动条。博主被这个问题困扰了两天，后来终于找到了问题原因和解决方法。

• 问题原因：
  简单贴一下原布局样式：

//包括左侧导航栏和右侧内容主体
.remain {
  display: flex;
  position: absolute;
  top: 60px;
  bottom: 0px;
  overflow: hidden;
}
//左侧导航栏
nav {
  flex: 0 0 230px;
  width: 230px;
}
//右侧内容主体，包含el-table
.main {
  flex: 1;
  padding: 20px;
}

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

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

//包括左侧导航栏和右侧内容主体
.remain {
  display: flex;
  position: absolute;
  top: 60px;
  bottom: 0px;
  overflow: hidden;
}
//左侧导航栏
nav {
  flex: 0 0 230px;
  width: 230px;
}
//右侧内容主体，包含el-table
.main {
  width: calc(100% - 230px);
  padding: 20px;
}

这样就比较完美地解决了问题，上一张解决后的截图，博主继续踩坑去了：