diff --git a/frontend/src/Editor/Components/DraftEditor.jsx b/frontend/src/Editor/Components/DraftEditor.jsx
index 71b9a9de04..1df78ee1bf 100644
--- a/frontend/src/Editor/Components/DraftEditor.jsx
+++ b/frontend/src/Editor/Components/DraftEditor.jsx
@@ -152,6 +152,9 @@ class DraftEditor extends React.Component {
       editorState: EditorState.createWithContent(ContentState.createFromText(this.props.defaultValue)),
     };
 
+    this.editorContainerRef = React.createRef();
+    this.controlsRef = React.createRef();
+
     this.focus = () => this.refs.editor.focus();
     this.onChange = (editorState) => {
       let html = stateToHTML(editorState.getCurrentContent());
@@ -165,6 +168,27 @@ class DraftEditor extends React.Component {
     this.toggleInlineStyle = this._toggleInlineStyle.bind(this);
   }
 
+  componentDidMount() {
+    //For resizing the editor container based on the height of rich text editor controls
+    this.resizeObserver = new ResizeObserver(() => {
+      if (this.controlsRef.current && this.editorContainerRef.current) {
+        const controlsHeight = this.controlsRef.current.offsetHeight;
+        const editorHeight = this.props.height - 46 - controlsHeight;
+        this.editorContainerRef.current.style.height = `${editorHeight}px`;
+      }
+    });
+
+    if (this.controlsRef.current) {
+      this.resizeObserver.observe(this.controlsRef.current);
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+  }
+
   componentDidUpdate(prevProps) {
     if (prevProps.defaultValue !== this.props.defaultValue) {
       const newContentState = ContentState.createFromText(this.props.defaultValue);
@@ -219,12 +243,12 @@ class DraftEditor extends React.Component {
     }
 
     return (
-      <div className="RichEditor-root">
-        <div className="RichEditor-controls">
+      <div className="RichEditor-root" style={{ overflowY: 'scroll', scrollbarWidth: 'none' }}>
+        <div className="RichEditor-controls" ref={this.controlsRef}>
           <BlockStyleControls editorState={editorState} onToggle={this.toggleBlockType} />
           <InlineStyleControls editorState={editorState} onToggle={this.toggleInlineStyle} />
         </div>
-        <div className={className} style={{ height: `${this.props.height - 60}px` }} onClick={this.focus}>
+        <div className={className} ref={this.editorContainerRef} onClick={this.focus}>
           <Editor
             blockStyleFn={getBlockStyle}
             customStyleMap={styleMap}