The [Bug Report] tree component has no width, resulting in no horizontal scroll bar

[xcodebin]

Element UI version

1.3.3

OS/Browsers version

win64

Vue version

2.3.3

Reproduction Link

https://jsfiddle.net/3c418651/#&togetherjs=regUnvbS8I

Steps to reproduce

给tree包裹DIV，div宽度设置比节点宽度小，不会出现横向滚动条

What is Expected?

tree需要有宽度。

What is actually happening?

无宽度

[element-bot]

Translation of this issue:

Element UI version

1.3.3

OS/Browsers version

Win64

Vue version

2.3.3

Reproduction Link

https://jsfiddle.net/3c418651/#&togetherjs=regUnvbS8I

Steps to reproduce

Wrap tree to DIV. Div width settings are smaller than the node width, and no horizontal scroll bars appear

What is Expected?

Tree needs to have width.

What is actually happening?

No width

[gemmi]

is there any solution now？

[gemmi]

there is a trik: .el-tree{ width: 100%; overflow-x: scroll; } .el-tree>.el-tree-node{ display: inline-block !important; } it works well in my project

[Leopoldthecoder]

是的，需要自己覆盖一下 CSS https://jsfiddle.net/3c418651/1/

[danielmlc]

.el-tree>.el-tree-node{ display: inline-block !important; } 这样覆盖了会有问题 会出现两个节点在一行

[liangshaoJY]

这个最后怎么解决了呢， 今天遇到同样问题 版本2.2.1

[keeva]

.el-tree>.el-tree-node{ min-width:100%; display: inline-block !important; } 两个节点在一行的情况可以加上min-width解决

[jKatherine]

完美解决树的横向滚动条问题

[ZeroJsus]

感谢! 完美的解决了我的问题

[ZeroJsus]

我觉得 overflow要设置为auto比较好 因为设置为scroll 会使得内容不管有没有溢出都会显示滚动条 比较难受

[shanxlei]

thanks

[freedomdebug]

自行搞定，参考：http://tommyhu.cn/element-tree-heng-xiang-gun-dong-tiao/

[sunqiangde]

设置 overflow-x:scroll 滚动条滑不了 it's fail

[sunqiangde]

设置 overflow-x:scroll 滚动条滑不了 现在滚动条出来了 但是给 .el-tree的固定宽度 怎么能宽度自适应呢

[klren0312]

怎么设置换行显示...

[ickedesign]

参考了以上代码，自己发现了两个小注意点：

1. 要在树外层多定一个父元素，并设置父元素的高，这样才不会出现横向滚动条在树的最低端，需要滚动竖向滚动条才能看到；
2. 设置以下属性，可以防止树多出了莫名的高度

   .el-tree-node > .el-tree-node__children {
   overflow: visible;
   }

[wangybm]

我用的element-react，参考了比的方式，好像不生效

[lubaogit]

树标签外加上：

样式重写 .el-tree>.el-tree-node{display:inline-block; min-width:100%; width: auto; } 完美解决

[moraltaken]

ele有提供el-scrollbar [el-scrollbar wrap-class="scrollbar-wrapper"> [/el-scrollbar>

[yilumengxiang]

用了这个方法节点会在一行，加上min-width 一个父节点下只显示一个子节点 。有没有什么完美解决方案啊

[xofred]

用了这个方法节点会在一行，加上min-width 一个父节点下只显示一个子节点 。有没有什么完美解决方案啊

我的按上面大佬们说的弄好了，不会有问题

不过我用了 :render-content 属性自定义节点内容。不知是否这个原因

<el-tree
              node-key="id"
              :data="catalogs"
              :props="catalogs"
              :filter-node-method="filterNode"
              ref="treeCatalogs"
              lazy
              :load="loadNode"
              @node-click="handleCatalogClick"
              :render-content="renderContent"
              >
            </el-tree>

renderContent(h, { node, data, store }) {
        return (
          <span class="custom-tree-node">
            <span>{node.label}</span>
            <span style="color: green;"><strong>({node.data.popularProductsCount})</strong></span>
          </span>);
      },

.el-tree{
  width: 100%;
  overflow-x: scroll;
}
.el-tree>.el-tree-node{
  min-width: 100%; /* 我加在这里 */
  display: inline-block !important;
}

[lkiarest]

这种问题不应该官方直接解决掉吗？ 目前还是老样子~~