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

Created on 7 Feb 2017 · 13Comments · Source: ElemeFE/element

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的问题还是我得布局的问题

像上面例子中

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

What is Expected?

想页面中 1 那样 , 怎么看都是正常的

What is actually happening?

table

Source

wenner

👍7

Most helpful comment

.el-table__header{
table-layout: auto !important;
}
I add this css style

getyouyou on 23 Aug 2017

👍3

All 13 comments

要配合overflow:hidden，我有时候也会遇到这种问题，flex:1或者width:100%并不能保证正好100%，有时候会超出试试overflow:hidden，有时可能需要父节点加100%，反正我是各种尝试

erguotou520 on 8 Feb 2017

@erguotou520 是的,真的是各种尝试 , 然后有的时候尝试很多次,突然发现好了..却不知道为什么好的...
也许就这么一直用总也不出问题
也许下一次同样的DOM结构,同样的样式又出问题了

我猜测觉得会不会是table resizer的问题??

wenner on 8 Feb 2017

👍1

我以前也提过类似的issue，但是没有研究过具体原因

erguotou520 on 8 Feb 2017

👍1

facing the same problem when using ELTable as a flex item, adding width: 100% and overflow: hidden doesn't really solve the problem. Ended up with absolute positioning instead of flex laylout

blooddrunk on 5 Jun 2017

.el-table__header{
table-layout: auto !important;
}
I add this css style

getyouyou on 23 Aug 2017

👍3

在 2.1.0 中已经无法重现，请确认：http://jsfiddle.net/axxkawzk/15/

furybean on 8 Feb 2018

遇到同样问题，2.3.3

ccqgithub on 4 Apr 2018

@furybean 这个问题仍然存在, 我在1.4上遇到了这个问题, 在jsfiddle上用2.3.5修改了一下你的demo, 仍然复现
http://jsfiddle.net/luto/1qz65xwg/
第三个页签中, 我手动修改了side的宽度和最小宽度变为0, 表格拉伸, 然后再改回来, side恢复了但是表格没有变窄, 下方出现滚动条