el-card嵌套el-tabs内容超出显示滚动条

需求如下图，el-tabs的内容如果el-card文本框的内容后显示滚动条，并且滚动条内容是完整的

大屏下el-card如图

在屏幕缩小的时候el-card也会跟着变小，这时内容超出了，显示滚动条

 1-html代码

<el-card class="box-card terminal-right-list">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="终端" name="first">
              <div>
                列表<br>
                列表<br>
                列表<br>
                列表<br>
                列表<br>
                列表<br>
                列表<br>
                列表<br>
                列表<br>
                列表<br>
                列表<br>
                列表<br>
                列表<br>
                列表<br>
                列表11<br>
              </div>
      </el-tab-pane>
            <el-tab-pane label="关联" name="second"
              >关联</el-tab-pane
            >
          </el-tabs>
        </el-card>

 2-css代码如下

el-card这边我是根据父级的display-flex来定的，所以宽高是不定的，会根据浏览器的窗口大小来改变，这个可以根据自己的需求来更改，也可以改成固定值。如果和我一样用到了flex，建议直接复制如下代码，即可实现

    .terminal-right-list {
      margin-top: 20px;
      flex: 1;
      box-sizing: border-box;
      ::v-deep .el-card__body {
        height: 90%;
        .el-tabs {
          height: 100%;
          .el-tabs__content {
            height: calc(100% - 52px); /* 减去tab的高度和padding */
            overflow: auto; /* 超出部分滚动 */
          }
        }
      }
    }

文章到此结束，希望对你有所帮助~~