Element Plus el-tree 's nested child nodes do not add width to the whole tree

Problem description

The width of a el-tree element is decided by the top level nodes. The deeper child nodes (nodes on the 2nd level, 3rd level and so on) have no influence on the width of the whole tree.

The result is that, the child nodes that are wider than the whole tree are partly hidden.

Solution

Add this CSS rule to override the default behavior of el-tree:

.el-tree-node>.el-tree-node__children {
  overflow: visible !important;
}
Posted on 2023-06-26