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(含外边距)之后剩余的宽度css布局左边固定右边自适应
对⽐了其它布局，很快就锁定了原因，只有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) }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。