textarea如何实现默认最小高度，根据内容高度自适应，超过最大高度就滚动显示？

textarea默认只显示一行的高度，输入内容不超过3行，高度自适应展示，超过3行则滚动显示。

<div class="textarea-content">
   <textarea name="note" class="textarea" v-model="text"
            placeholder="请输入您的问题..."></textarea>
    <div class="textarea-visibility">{{ text }}</div>
</div>
.textarea-content {
  position: relative;
  width: 90vw;
  min-height: 20px;
  max-height: 70px;
  overflow-x: hidden;
  overflow-y: scroll;

  .textarea {
    color:#ccc;
    font-weight: 400;
    font-size: 12px;
    outline: none;
    border: none;
    background: transparent;
    resize: none;
    position: absolute;
    width: 100%;
    height: 100%;
  }

  /* 设置滚动条的样式 */
  .textarea::-webkit-scrollbar {
    width: 2px;
  }

  /* 滚动槽 */
  .textarea::-webkit-scrollbar-track {
    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
    border-radius: 10px;
  }

  /* 滚动条滑块 */
  .textarea::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
  }

  .textarea::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255, 0, 0, 0.4);
  }

  .textarea-visibility {
    position: relative;
    visibility: hidden;
    word-break: break-all;
  }
}