flex布局下el-table横向滚动条失效

如下图，是一种常见的页面结构，我们可以有很多方法实现，inline-block，float，flex等等

但是，最近项目中遇到一个怪事，左边是侧边栏导航，右边是一个数据展示table，el-table的横向滚动条死活不出来。

我是采用flex布局，这里简单贴一下css源码 ： （page 页面根容器 sidebar 左侧导航，main-content 右侧主体内容区）

.page { display: flex; }
.sidebar { width: 150px; margin-right: 20px }
.main-content { flex: 1; }     flex: 1 // 主体内容会自动占满父元素减去sidebar(含外边距)之后剩余的宽度

 

对比了其它布局，很快就锁定了原因，只有flex布局下并且自适应了宽度才会出现这种问题。接下来想办法解决。 

尝试一：

             直接给el-table设定一个固定宽度，比如1000px，滚动条正常，但这肯定不是我想要的，毕竟这种布局多半是要兼容多种屏幕分辨率，所以放弃。

             而且，说不定后期又增加字段，这是常有的事，不可能每次都改宽度，太low。

尝试二：

　　　  在网上找了一个方法，说是通过定位，父元素relative，子元素absolute，试了一下，貌似可行，但是，毕竟是脱离文档流，会影响其后面元素的布局，

             再者，宽度高度都要设定，不能适应多屏，果断弃用。

终极解决方案： 

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

.page { display: flex; }
.sidebar { width: 150px; margin-right: 20px }
.main-content { width: calc(100% - 150px) }    

　　

 

转载于:https://www.cnblogs.com/hcxy/p/9665201.html