如何使 monaco 编辑器的大小与其父 div 一致？

Question

所以我正在尝试创建一个包含两个并排的 monaco 编辑器实例的布局。我正在使用 React，我正在使用 @monaco-edior/react 组件。

我在 CSS:

中使用 flex 布局创建了所需的布局

但是当我添加编辑器组件时，布局完全中断：

似乎正在发生的事情是左侧的 monaco 编辑器增长到某个固有定义的大小，并超过了我在 flex 中定义的布局。我不确定这是 CSS 我如何编写布局的问题，还是我在配置 monaco 组件方面遗漏的问题。

我的 JSX 看起来像这样：

  <div className="container">
      <div className="item">
        <Editor
            onMount={this.editorDidMount}
        ></Editor>
      </div>
      <div className="item">
          <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: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: stretch;
}

.item {
    background-color: #efefef;
    flex-grow: 1;
}

.item + .item {
    margin-left: 10px;
}

我对 React 和 CSS 相当缺乏经验，这可能是什么原因造成的，我可以从哪里开始寻找解决方案？

Answer 1

monaco-react 中的默认宽度设置为 100%，这意味着它将继承父容器。如果将 .item class 的宽度设置为 50%，那么一切都应该按预期工作。

这里是 codesandbox 和嵌入示例

如何使 monaco 编辑器的大小与其父 div 一致？

How can I make the monaco editor size to its parent div?

css

reactjs

monaco-editor