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

After a few things didn't work with CSS, I tried javascript to solve this

  updateDimensions = () => {
    this.setState({
      width: window.innerWidth - 501,
      height: window.innerHeight - 50,
    });
  };

  componentDidMount() {
    window.addEventListener("resize", this.updateDimensions);
  }
  componentWillUnmount() {
    window.removeEventListener("resize", this.updateDimensions);
  }

Storing the height and width in the state and changing on resize event did the job.