ElemeFE / ElemeFE/element

[Bug Report] Table 在 Flex 布局情况下, 无限加宽的问题

Open
#2,716 19 comments 9 reactions 0 assignees View on GitHub
component: table
Dominant language
Vue
Stars
54k
Forks
14.4k
PR merge metrics
No merged PRs in 30d

Description

### ElementUI version
1.1.6

### OS/Browers version
Win10/Chrome 55

### Vue version
2.1.0

### Reproduction Link
http://jsfiddle.net/wenner/axxkawzk/13/

### Steps to reproduce
flex布局 , 给表格加样式
```
.el-table{
height:100%;
flex: 1 0 0 !important;
display: flex;
flex-direction: column
}

.el-table .el-table__body-wrapper {
flex: 1 0 0 !important;
}
```
让后再页面中同样进行flex布局,并且横向布局 , 可以看到各种奇怪的

对flex的原理实现并不熟悉,所以不知道是table的问题还是我得布局的问题

像上面例子中
1. 是正常的 , 怎么改变窗口 都是正常
2. 这个的表格会宽很多 , 不过如果给 .con 加 style: overflow:hidden 的话 , 开始看起来是正常的, 如果改变下result窗口高度, 那么在table下面会出现滚动条 , 这个滚动条拉倒最左边, 就和表头不一样齐了
3. 这个会无限的加宽 , 同样如果给.con加 style:overflow:hidden 的话 , 看起来也不正常 (其实,在我自己项目中,这种情况是正常的,而且是那种非常正常的,不过没在重现,因为原项目有别的样式)

### What is Expected?
想页面中 1 那样 , 怎么看都是正常的

### What is actually happening?

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.