element-ui对话框组件自定义内容超出显示滚动条

需求是内容高度固定了，文字过多的话自动显示滚动条

html:
<el-dialog
      title="<<某某用户协议>>"
      :visible.sync="userDig"
      width="800px"
      custom-class="userDig"
      center>
      <div class="userAgree">
        <span class="userAgree_txt">
          欢迎您注册点评账号并使用点评的服务！
          本《点评平台用户服务协议》（以下简称“本服务协议”）是您与点评之间就注册美团点评用户账号及使用点评的各项服务等相关事宜所订立的协议。为使用点评的服务，您应当仔细阅读并遵守本服务协议下的全部内容，特别是涉及免除或者责任限制的条款，该类条款可能以黑体加粗或加下划线的形式提示您重点注意。除非您已阅读并接受本服务协议所有条款，否则您将不能注册美团点评账号或使用美团点评的服务，如您不同意本服务条款的任意内容，请勿注册或使用点评的服务，并应立即停止注册程序。如您对本服务协议的内容（特别是涉及免除或者责任限制的条款）有任何疑义，可随时按照本服务协议中列明的联系方式与我们联系，我们将根据您的要求为您进一步解释和说明相关内容。如您勾选“我同意《点评平台用户服务协议》”并通过注册程序或其他任何方式使用或接受美团点评的任何服务，即视为您已阅读并同意本服务协议，自愿接受本服务协议的所有内容的约束。请您在决定注册或使用服务前再次确认您已知悉并完全理
   </span>
  </div>
</el-dialog>
css:
.userDig {
  background: #f9f9f9;
  border-radius: 20px;
  /deep/ .el-dialog__header {
    padding: 24px 30px;
    /deep/ .el-dialog__title {
      color: #343434;
      font-weight: 600;
    }
    /deep/ .el-dialog__headerbtn {
      top: 28px;
      right: 30px;
      /deep/ .el-dialog__close {
        color: #1a1a1c;
        font-weight: 600;
      }
    }
  }
  /deep/ .el-dialog__body {
    padding: 0px 30px 30px;
    .userAgree {
      height: 370px;
      background: #fff;
      padding: 22px 32px 28px;
      border-radius: 10px;
      overflow: auto;
    }
  }
}

主要是给自定内容的设置两个属性{height: 370px; overflow: auto;}

.userAgree {
  height: 370px;
  overflow: auto;
}

效果图：

愿你表里如一，余生有梦可依。