CSS：私はフレックスレイアウトの行にいくつかのコンテンツを置くしようとしていると私は</p> <ul> <li>行は、私が作ってみる彼のコンテンツの代わりに</li> </ul> <p>と幅にリサイズすることに気づいた

Question

フレキシボックスのレイアウトが静的作ります行の幅は静的であるため、より大きいすべての子が壊れます。

CodeMirrorエディターは、その行に大きな子や小さな子を持つ問題を示すために使用されています。

は、私はそれを行うだろうか、この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(){ 
 
\t 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>

を見てみましょうか？

Answer 1

JavaScriptを使用する必要があります。ちょうど中間flexの要素のwidth（私の場合はクラスは.codemirror）&を取得し、そのwidthをそれ自身に適用します。同様に：

// Used setTimeout to get the plugin initialized 
setTimeout(function() { 
    var codemirror_width = $('.flex.codemirror').width(); 
    $('.flex.codemirror').css('width', codemirror_width); 
}, 100); 

は、以下の作業スニペットを見てください：

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"> 
 
\t $(document).ready(function(){ 
 
\t \t 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>

・ホープ、このことができます！