vue codemirror 设置高度无效的解决办法

最近使用vue-codemirror发现设置高度怎么都不生效，网上的办法都用了也不行，最后终于摸索出解决办法

首先是坑

不能使用scss, 只有使用css才有效

要给.CodeMirror-scroll设置高度，给.CodeMirror设置高度无效

<template>
  <div class="root">
    <div class="my">
      <codemirror
        ref="myCm"
        v-model="formData.queryText"
        :options="cmOptions"
        @ready="onCmReady"
        @focus="onCmFocus"
        @input="onCmCodeChange"
      >
      </codemirror>
    </div>
  </div>
</template>
<script>
import "codemirror/mode/sql/sql.js";
// theme css
import "codemirror/theme/solarized.css";
// require active-line.js
import "codemirror/addon/selection/active-line.js";
// closebrackets
import "codemirror/addon/edit/closebrackets.js";

export default {
  data() {
    return {
      formData: {
        queryText: "",
      },
      cmOptions: {
        tabSize: 4,
        styleActiveLine: true,
        lineNumbers: true,
        line: true,
        mode: "text/x-mysql",
        theme: "solarized light",
      },
    };
  },
  computed: {
    codemirror() {
      return this.$refs.myCm.codemirror;
    },
  },
  methods: {
    showSQL(val) {
      this.formData.queryText = val ? val : "";
    },
    onCmReady(cm) {
      this.codemirror.setSize("-webkit-fill-available", "auto");
    },
    onCmFocus(cm) {
      // console.log('the editor is focus!', cm)
    },
    onCmCodeChange(newCode) {
      console.log("this is new code", newCode);
      this.formData.queryText = newCode;
      this.$emit("codeChange", this.formData.queryText);
    },
  },
};
</script>
<style scoped lang="css">
.root {
  height: 700px;
  background-color: rgb(228, 41, 41);
}
.my {
  width: 900px;
  height: 600px;
  background-color: rgb(151, 73, 73);
}
.my >>> .CodeMirror-scroll {
  height: 500px;
  overflow-y: hidden;
  overflow-x: auto;
}


</style>