Содержимое вложенных вкладок el-card превышает полосу прокрутки дисплея

Требования показаны на рисунке ниже, если содержимое el-tabs отображает полосу прокрутки после содержимого текстового поля 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; /* 超出部分滚动 */
          }
        }
      }
    }

На этом статья подходит к концу, надеюсь, она будет вам полезна~~