[VUE]解决组件固定长宽后，更下层内容展示遮挡问题

问题背景&描述

最近在使用element-ui 里的el-tree组件功能时，希望能够将整棵树处于一个固定长宽并且能够有滚动条帮助查看全部内容的功能。
这里采用了这篇文章里的css：
https://blog.csdn.net/Qxn530/article/details/126647153
copy代码如下，处于自己需求做了些微调：

.box {
 	margin-right: 10px;
    margin-left: 25px;
    margin-bottom: 10px;
    margin-top: 25px;
    padding: 10px 10px 10px 10px;
    height: 500px;
    width: 300px;
    overflow: hidden;
    white-space: nowrap
    overflow-y: auto;// 设置滚动条
    overflow-x: auto;

  /*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
  // 滚动条整体部分
  &::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }
  // 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
  &::-webkit-scrollbar-button {
    display: none;
  }
  // 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
  &::-webkit-scrollbar-thumb {
    background: rgba(144, 147, 153, 0.3);
    cursor: pointer;
    border-radius: 4px;
  }
  // 边角，即两个滚动条的交汇处
  &::-webkit-scrollbar-corner {
    display: none;
  }
  // 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
  &::-webkit-resizer {
    display: none;
  }
}

实现后发现子树的文案超过设置的固定width后，后半段遮挡隐藏，现在需要解决这个问题。

问题原因

我在写这个树时，已经用了flex帮助处理布局，但是el-tree内部也使用了flex，导致这个问题。

解决办法

来自百度百科的介绍:
在CSS中，块级对象元素会单独占一行显示，多个block元素会各自新起一行，并且可以设置width,height属性；而内联对象元素前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满，对inline元素设置width,height属性无效。
我们有个时候既希望元素具有宽度高度特性，又具有同行特性，这个时候我们可以使用inline-block。在CSS中通过display:inline-block对一个对象指定inline-block属性，简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
css增加：display:inline-block 解决问题

  .adaption_width{
    display:inline-block;
  }```