CSS : 인 flexbox 레이아웃 정적 만들기

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을 사용해야합니다. 그냥 중간 플렉스 요소 width (내 경우 클래스는 .codemirror) &을 얻은 다음 width을 적용하십시오. 마찬가지로이 도움이

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>

희망 :

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

는 아래의 스 니펫에서 근무 보라!