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

So I am trying to create a layout with two instances of the monaco editor side-by-side. I'm working with react, and I'm using the

But when I add the editor component, the layout completely breaks:

It seems like what is happening is that the monaco editor on the left grows to some intrinsically defined size, and overtakes the layout I have defined in flex. I'm not sure if this is a CSS issue with how I have written the layout, or it's something I'm missing in terms of configuring the monaco component.

My JSX looks like this:

  <div className="container">
      <div className="item">
        <Editor
            onMount={this.editorDidMount}
        ></Editor>
      </div>
      <div className="item">
          <Editor
            onMount={this.editorDidMount}
          ></Editor>
      </div>
  </div>

And my CSS looks like this:

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;
}

I'm fairly inexperienced with react and CSS, what might be causing this and where could I start to look to find a solution?

CodePudding user response：

Default width in monaco-react is set to 100%, which means it will inherit from parent container. If you set width to .item class to be 50% then everything should be working as you expect.

Here is codesandbox with embeed example