CSS: Flexbox Layout is not static

Question

I am trying to embed CodeMirror into a flex layout and I noticed that

• the Editor window resizes with his content
• the Editor window does not 'care' about the width of it's parent

Instead I want to set it's max-width to the parent's width.

Take a look at this Fiddle

HTML

<script type="text/javascript">
$(document).ready(function(){
    var ce = document.getElementById("item");

var myCodeMirror = CodeMirror(function(node){ce.parentNode.replaceChild(node, ce);}, {
  value: "function myScript(){return 100;}",
  mode:  "javascript",
  lineSeparator: null,
  theme: "default", // theme directory
  indentUnit: 2,
  smartIndent: true,
  tabSize: 2,
  indentWithTabs: false,
  electricChars: true,
  extraKeys: null,
  lineWrapping: false,
  lineNumbers: true,
  firstLineNumber: 1,
  scrollbarStyle: "overlay",
  inputStyle: "contenteditable",
  readOnly: false, // also "nocursor"
  showCursorWhenSelecting: false,
  lineWiseCopyCut: true,
  undoDepth: 200,
  historyEventDelay: 1250,
  autofocus: true
});

});
</script>

<div id="main">
  <div class="flex">ABC</div>
  <div class="flex">
    DEF
    <div id="wrapper">
      <div id="item">
      </div>
    </div>
  </div>
  <div class="flex">GHI</div>
</div>

SCSS

#main {
  display: flex;
  justify-content: space-between;
  height: 100vh;
  .flex {
    width: 100%;
    &:nth-child(2) {
      background: red;
    }
    #wrapper #item {
      background: blue;

    }
  }
}

How would I do that?