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

【问题标题】：How can I make the monaco editor size to its parent div?如何使 monaco 编辑器的大小与其父 div 一致？
【发布时间】：2021-09-22 16:42:53
【问题描述】：

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

我已经使用 CSS 中的 flex 布局创建了所需的布局：

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

似乎正在发生的事情是左侧的 monaco 编辑器增长到某种固有定义的大小，并超过了我在 flex.xml 中定义的布局。我不确定这是我编写布局方式的 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 相当缺乏经验，这可能是什么原因造成的，我可以从哪里开始寻找解决方案？

【问题讨论】：

标签： css reactjs monaco-editor

【解决方案1】：

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

这是codesandbox 嵌入示例

【讨论】：

感谢这完美的作品！我仍然不太清楚为什么 - 所以通过将 .item 的宽度设置为 50%，这表示 .item 的内容应该是 .item 父级大小的一半？
@sak 没错