title: How can I make the monaco editor size to its parent div?
body: <p>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 <a href="https://github.com/suren-atoyan/monaco-react" rel="nofollow noreferrer">@monaco-edior/react</a> component.</p>
  <p>I have created the desired layout using a flex layout in CSS:</p>
  <p><a href="https://i.stack.imgur.com/Jqi0l.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Jqi0l.png" alt="target" /></a></p>
  <p>But when I add the editor component, the layout completely breaks:</p>
  <p><a href="https://i.stack.imgur.com/1Et1d.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1Et1d.png" alt="actual" /></a></p>
  <p>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.</p>
  <p>My JSX looks like this:</p>
  <pre><code>  &lt;div className=&quot;container&quot;&gt;
        &lt;div className=&quot;item&quot;&gt;
          &lt;Editor
              onMount={this.editorDidMount}
          &gt;&lt;/Editor&gt;
        &lt;/div&gt;
        &lt;div className=&quot;item&quot;&gt;
            &lt;Editor
              onMount={this.editorDidMount}
            &gt;&lt;/Editor&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  <p>And my CSS looks like this:</p>
  <pre><code>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;
  }
  </code></pre>
  <p>I'm fairly inexperienced with react and CSS, what might be causing this and where could I start to look to find a solution?</p>