因此，我正試圖用兩個并排的monaco編輯器實體創建一個布局。 我正在使用 react，并且我正在使用 
但是當我添加編輯器組件時，布局完全中斷了：
似乎正在發生的事情是，左側的Monaco編輯器增長到某種內在定義的大小，并超越了我在flex中定義的布局。 我不確定這是否是我撰寫布局時的 CSS 問題，還是我在配置 monaco 組件時遺漏了什么。
我的JSX看起來是這樣的：
<div className="container"/span>>
<div className="item">
<Editor
onMount={this.editorDidMount}。
></Editor>>
</div>
<div className="item"/span>>
<Editor
onMount={this.editorDidMount}。
></Editor>>
</div>
</div>
而我的CSS看起來是這樣的：
html,
body {
height: 100%。
margin: 0px;
}
.container {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #999;
padding: 10px;
margin: 0px;
display: flex;
flex-direction: 行。
flex-wrap: nowrap;
justify-content: space-evenly;
align-items: stretch;
.item {
background-color: #efefef;
flex-grow: 1;
.item .item {
margin-left: 10px;
}
我對react和CSS相當沒有經驗，是什么原因導致了這種情況，我可以從哪里開始尋找解決方案？
uj5u.com熱心網友回復：
monaco-react中的默認寬度被設定為100%，這意味著它將繼承自父容器。
如果你將.item類的寬度設定為50%，那么一切都應該按照你的期望進行。
這里是codesandbox的嵌入示例
。轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/333973.html
標籤：