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

时间:2024-01-21 16:54:53

如下图,是一种常见的页面结构,我们可以有很多方法实现,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) }