项目需求是一个左树右表的结构,但是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;
}
}
这样就解决了: