how to make react-monaco-edtor responsive?

Question

I am using react-monaco-editor but I am not able to make it responsive. It takes a fixed height and width in the components. If I change the screen size, the width stays fixed.

    <MonacoEditor
      width="1200"
      height="600"
      language="typescript"
      theme="vs-dark"
      defaultValue="//type your code here"
      value={code}
      options={options}
      onChange={this.onChange}
      editorDidMount={this.editorDidMount}
      className='editor1'
    />

If I remove the width and height from the component, the component diminishes. I tried overriding the component className with flex. But it doesn't seem to work well.

.react-monaco-editor-container {
   flex: 2;
}

Can you help me with the CSS to make this responsive?

Answer 1

Simply in options set automaticLayout: true