CSS: Making Flexbox Layout static - html

Question

I am trying to put some content into a flex layout row and I noticed that
the row resizes in width with his content
Instead I try to make the width of the row static, so that every child, which is bigger, breaks.
CodeMirror editor is just used to illustrate the problem of having a bigger and/or smaller children in that row.
Take a look at this Fiddle
#main {
display: flex;
justify-content: space-between;
height: 100vh;
.flex {
width: 100%;
&:nth-child(2) {
background: red;
}
#wrapper #item {
background: blue;
}
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.20.2/codemirror.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.20.2/addon/scroll/simplescrollbars.min.css">
<script type="text/javascript" src ="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.20.2/codemirror.min.js">
<script type="text/javascript" src ="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.20.2/addon/scroll/simplescrollbars.js">
<script type="text/javascript" src ="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.20.2/mode/javascript/javascript.min.js">
<script type="text/javascript" src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js">
<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>
How would I do that?

Answer 1

You need to use JavaScript in this. Just get the width of the middle flex element (in my case its class is .codemirror) & then apply that width to itself. Like:
// Used setTimeout to get the plugin initialized
setTimeout(function() {
var codemirror_width = $('.flex.codemirror').width();
$('.flex.codemirror').css('width', codemirror_width);
}, 100);
Have a look at the working snippet below:
setTimeout(function() {
var codemirror_width = $('.flex.codemirror').width();
$('.flex.codemirror').css('width', codemirror_width);
}, 100);
#main {
display: flex;
justify-content: space-between;
height: 100vh;
}
#main .flex {
width: 100%;
}
#main .flex:nth-child(2) {
background: red;
}
#main .flex #wrapper #item {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.20.2/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.20.2/addon/scroll/simplescrollbars.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.20.2/mode/javascript/javascript.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.20.2/addon/scroll/simplescrollbars.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.20.2/codemirror.min.css" rel="stylesheet"/>
<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 codemirror">
DEF
<div id="wrapper">
<div id="item">
</div>
</div>
</div>
<div class="flex">GHI</div>
</div>
Hope this helps!