diff --git a/src/components/JsonEditor/index.vue b/src/components/JsonEditor/index.vue
index 1f2b769a..d73fe578 100644
--- a/src/components/JsonEditor/index.vue
+++ b/src/components/JsonEditor/index.vue
@@ -53,11 +53,16 @@ export default {
 }
 </script>
 
-<style>
-.CodeMirror {
+<style scoped>
+.json-editor{
   height: 100%;
+  position: relative;
 }
-.json-editor .cm-s-rubyblue span.cm-string {
+.json-editor >>> .CodeMirror {
+  height: auto;
+  min-height: 300px;
+}
+.json-editor >>> .cm-s-rubyblue span.cm-string {
   color: #F08047;
 }
 </style>
diff --git a/src/styles/index.scss b/src/styles/index.scss
index f98127f1..b6fd924e 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -140,10 +140,6 @@ code {
   margin-top: 30px;
 }
 
-.editor-container .CodeMirror {
-  height: 100%!important;
-}
-
 .text-center {
   text-align: center
 }
diff --git a/src/views/components-demo/jsonEditor.vue b/src/views/components-demo/jsonEditor.vue
index c3b12813..75299bc0 100644
--- a/src/views/components-demo/jsonEditor.vue
+++ b/src/views/components-demo/jsonEditor.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="components-container" style="height:100vh">
+  <div class="components-container">
     <code>JsonEditor is base on  <a href="https://github.com/codemirror/CodeMirror" target="_blank">CodeMirrorr</a> , lint base on json-lint </code>
     <div class="editor-container">
       <json-editor ref="jsonEditor" v-model="value"></json-editor>