Невозможно изменить размер элемента textarea HTML при использовании модулей CodeMirror

Question

У меня есть textarea в моем HTML. Для элемента я использую модули codemirror.js и codemirror.css (CodeMirror).

<md-content flex style="display: flex; flex-flow: column;"> 
    <textarea id="textArea" style="flex:1"></textarea> 
</md-content> 

Я использую отдельный файл JavaScript для управления модулями.

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

Когда я открыть это в текстовой области браузера автоматически заполняется по горизонтали в окне, но не по вертикали (ширина: 100% & высота: 50%). Я попытался добавить <style> и установить ширину и высоту. Но он ничего не меняет.

<textarea id="textArea" style="flex:1; width:200px; height:300px"></textarea> 

Кроме того, я попытался изменить CSS с помощью JavaScript, опять же, он не изменил размер элемента.

textArea.style.width = 200; 
textArea.style.height = 300; 

Я хотел, чтобы <textarea> быть заполнены в <md-content>, поэтому я использовал flex:1. Как я могу изменить размер, чтобы заполнить область родительского тега (тот же размер, что и родительский md-content).

Это complete code

Answer 1

https://jsfiddle.net/e86pztkh/1/

.CodeMirror { 
    position: relative !important; 
    height: 100% !important; 
} 
html, body{ 
    min-height: 100%; 
    position: relative; 
    height: 100%; 

}

Не уверен, что если у вас есть файл CSS CodeMirror локально, если вы просто изменить его и сбросить! Важные заявления.