How to get the editor to size based on container?

[spencerkohan]

So I am trying to build a layout with two side-by-side editors.

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 like so:

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

If I comment out the editors, I get the expected even two-column layout:

But when I add the editors back in, the layout is broken:

The first editor seems to expand to some intrinsically defined width, and squeezes out the second editor.

Where is this defined, and how can I get the editor to just obey the size defined by the container?

[suren-atoyan]

Hello @spencerkohan Can you please wrap up this into a codesandbox, that we can test it?

[felipellrocha]

Any updates on this? @spencerkohan were you able to fix it?

[CriusNyx]

This appears to be an issue with Monaco itself, and not the react implementation. It appears that the div that contains Monaco won't naturally shrink smaller then the Monaco instance. I fixed this by placing Monaco in a div with position set to absolute.

<div
  style={{
    position: "relative",
    width: "100%",
    height: "100%",
  }}
>
  <div
    style={{
      position: "absolute",
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
    }}
  >
    <Editor
      value={currentFile.currentText}
      onChange={() => {
        dispatch(setCurrentFileText);
      }}
      theme="vs-dark"
      language="markdown"
      options={{
        automaticLayout: true,
        wordWrap: "on",
      }}
    />
  </div>
</div>