How Can I make codemirror responsive

I've looked in several places, but I'm not able to make my codemirror responsive, I've tried

.CodeMirror {
  border: 1px solid #eee;
  height: auto;
  word-wrap: break-word;
}

but when someone doesn't give space / jump to another line the codemirror is wider than my container: image

Here is my code:

      var editor = CodeMirror.fromTextArea(document.getElementById("editor"), {
    lineNumbers: true
  });

.CodeMirror {
  border: 1px solid #eee;
  height: auto;
  word-wrap: break-word;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.css" rel="stylesheet"/>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Detailed description of your Server * min. 300 chars(Markdown SUPPORTED)</label>
<textarea id="editor">

</textarea>
  </div>

even my div is changed in size,before

after

How Can I make codemirror responsive

0 Answers