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


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 @monaco-edior/react component.

I have created the desired layout using a flex layout in CSS:

target

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

actual

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?

Source: CSS – Stack Overflow

September 22, 2021
Category : News
Tags: css | monaco-editor | reactjs

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.