html - CSS:将Flexbox布局设为静态

我正在尝试将一些内容放入弹性版式行中，我注意到


该行将根据其内容调整宽度


相反，我尝试使行的宽度固定不变，以使每个较大的子项都中断。

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(){
	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>

我该怎么办？

最佳答案

您需要在其中使用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">
	$(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>

希望这可以帮助！

关于html - CSS:将Flexbox布局设为静态，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41303572/