el-tree自定义文本，内容超出容器时，横向滚动条不起效

一天一个坑，这个问题搞了一个下午，岂可修，一口老血吐出来了QAQ

先上代码

主要是el-tree下的el-tree-node是个div，块级元素，导致我怎么设置，滚动条都不出来。
代码如下，将其设置为inline-block；

      // 内容溢出，设置横向滚动条
      .el-tree {
        width: 100%;
        overflow: auto;
      }

      /deep/ .el-tree > .el-tree-node {
        display: inline-block;
        min-width: 100%;
      }

html

      <div class="rightTree">
          <div class="switchText">
            {{ $t('accountBooks.table.header.switch_fast') }}
          </div>
          <el-autocomplete
            class="inline-input"
            v-model="search_value"
            :fetch-suggestions="querySearch"
            size="medium"
            :placeholder="$t('placeholder.name_enter')"
            @select="handleSelect"
            @keydown.enter.native="toSearch()"
          >
            <el-button
              size="medium"
              slot="append"
              icon="el-icon-search"
              @click.stop="clickQuery(query_result[0])"
              style="
                border-top: 1px solid #1677ff;
                color: white;
                background: #1677ff;
                border-radius: 0;
              "
            />
          </el-autocomplete>
          <div class="accTree" v-loading="treeLoading">
            <el-tree
              ref="tree"
              :data="treeData"
              node-key="code"
              default-expand-all
              :props="defaultProps"
              :expand-on-click-node="false"
              :indent="8"
              style="color: black;"
              @node-click="clickTree"
              :highlight-current="true"
              :current-node-key="currentNode"
            >
              <div
                class="custom-tree-node tree-hover"
                slot-scope="{ node, data }"
              >
                <span>
                  <i
                    v-if="data.children && data.children.length > 0"
                    class="ft-icons ft-folder-18"
                  />
                  <i
                    v-else
                    class="el-icon-document"
                    style="color: #cccccc; margin-right: 8px"
                  />
                  <span
                    style="
                      word-break: break-all;
                      white-space: nowrap;
                      padding: 3px 0px;
                    "
                  >{{ data.name }}</span>
                </span>
              </div>
            </el-tree>
          </div>
        </div>

css

 .rightTree {
    color: #717171;
    font-size: 14px;
    font-weight: 400;
    box-sizing: border-box;
    margin-left: 40px;
    padding: 0 25px;
    max-width: 320px;
    overflow-x: auto;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #e8ecef;
    .switchText {
      margin: 38px 0 20px 0;
      font-size: 16px;
      font-family: SourceHanSansSC-Medium, SourceHanSansSC;
      font-weight: 500;
      color: #333333;
      line-height: 24px;
    }
    .accTree {
      width: auto;
      margin-top: 10px;
      text-align: left;
      // 内容溢出，设置横向滚动条
      .el-tree {
        width: 100%;
        overflow: auto;
      }

      /deep/ .el-tree > .el-tree-node {
        display: inline-block;
        min-width: 100%;
      }

      /deep/ .el-tree-node.is-current > .el-tree-node__content {
        align-self: baseline;
        background: rgba(22, 119, 255, 0.1);
        border-right: 3px solid #1677ff;
        color: #187aff;
        /deep/ .el-tree-node__expand-icon {
          color: rgb(0, 112, 255);
        }
        /deep/ .is-leaf {
          color: rgba(0, 0, 0, 0);
        }
      }
      /deep/ .el-tree-node__expand-icon {
        color: rgb(96, 98, 102);
      }
      /deep/ .is-leaf {
        color: rgba(0, 0, 0, 0);
      }
      /deep/ .el-tree-node__content {
        height: 33px;
      }
      /deep/ .el-tree-node__content:hover {
        background: rgba(22, 119, 255, 0.1);
      }
    }
  }