diff --git a/packages/shared-ux/code_editor/impl/code_editor.tsx b/packages/shared-ux/code_editor/impl/code_editor.tsx
index f55bd115a94d3..890e794afc7a4 100644
--- a/packages/shared-ux/code_editor/impl/code_editor.tsx
+++ b/packages/shared-ux/code_editor/impl/code_editor.tsx
@@ -112,6 +112,8 @@ export interface CodeEditorProps {
    */
   editorDidMount?: (editor: monaco.editor.IStandaloneCodeEditor) => void;
 
+  editorWillUnmount?: () => void;
+
   /**
    * Should the editor use the dark theme
    */
@@ -165,6 +167,7 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({
   overrideEditorWillMount,
   editorDidMount,
   editorWillMount,
+  editorWillUnmount,
   useDarkTheme: useDarkThemeProp,
   transparentBackground,
   suggestionProvider,
@@ -446,10 +449,12 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({
 
   const _editorWillUnmount = useCallback<NonNullable<ReactMonacoEditorProps['editorWillUnmount']>>(
     (editor) => {
+      editorWillUnmount?.();
+
       const model = editor.getModel();
       model?.dispose();
     },
-    []
+    [editorWillUnmount]
   );
 
   useEffect(() => {
diff --git a/src/plugins/console/public/application/containers/editor/monaco/monaco_editor.tsx b/src/plugins/console/public/application/containers/editor/monaco/monaco_editor.tsx
index c3b9b1c8dee1c..2778d6907fc5e 100644
--- a/src/plugins/console/public/application/containers/editor/monaco/monaco_editor.tsx
+++ b/src/plugins/console/public/application/containers/editor/monaco/monaco_editor.tsx
@@ -22,6 +22,7 @@ import { useSetInitialValue } from './use_set_initial_value';
 import { MonacoEditorActionsProvider } from './monaco_editor_actions_provider';
 import { useSetupAutocompletePolling } from './use_setup_autocomplete_polling';
 import { useSetupAutosave } from './use_setup_autosave';
+import { useResizeCheckerUtils } from './use_resize_checker_utils';
 
 export interface EditorProps {
   initialTextValue: string;
@@ -41,13 +42,25 @@ export const MonacoEditor = ({ initialTextValue }: EditorProps) => {
   } = useServicesContext();
   const { toasts } = notifications;
   const { settings } = useEditorReadContext();
+
+  const divRef = useRef<HTMLDivElement | null>(null);
+  const { setupResizeChecker, destroyResizeChecker } = useResizeCheckerUtils();
+
   const dispatch = useRequestActionContext();
   const actionsProvider = useRef<MonacoEditorActionsProvider | null>(null);
   const [editorActionsCss, setEditorActionsCss] = useState<CSSProperties>({});
 
-  const editorDidMountCallback = useCallback((editor: monaco.editor.IStandaloneCodeEditor) => {
-    actionsProvider.current = new MonacoEditorActionsProvider(editor, setEditorActionsCss);
-  }, []);
+  const editorDidMountCallback = useCallback(
+    (editor: monaco.editor.IStandaloneCodeEditor) => {
+      actionsProvider.current = new MonacoEditorActionsProvider(editor, setEditorActionsCss);
+      setupResizeChecker(divRef.current!, editor);
+    },
+    [setupResizeChecker]
+  );
+
+  const editorWillUnmountCallback = useCallback(() => {
+    destroyResizeChecker();
+  }, [destroyResizeChecker]);
 
   const getCurlCallback = useCallback(async (): Promise<string> => {
     const curl = await actionsProvider.current?.getCurl(esHostService.getHost());
@@ -79,6 +92,7 @@ export const MonacoEditor = ({ initialTextValue }: EditorProps) => {
       css={css`
         width: 100%;
       `}
+      ref={divRef}
     >
       <EuiFlexGroup
         className="conApp__editorActions"
@@ -120,12 +134,13 @@ export const MonacoEditor = ({ initialTextValue }: EditorProps) => {
         onChange={setValue}
         fullWidth={true}
         accessibilityOverlayEnabled={settings.isAccessibilityOverlayEnabled}
+        editorDidMount={editorDidMountCallback}
+        editorWillUnmount={editorWillUnmountCallback}
         options={{
           fontSize: settings.fontSize,
           wordWrap: settings.wrapMode === true ? 'on' : 'off',
           theme: CONSOLE_THEME_ID,
         }}
-        editorDidMount={editorDidMountCallback}
       />
     </div>
   );
diff --git a/src/plugins/console/public/application/containers/editor/monaco/monaco_editor_output.tsx b/src/plugins/console/public/application/containers/editor/monaco/monaco_editor_output.tsx
index c6297f6f56e2b..a5647cb1c49f1 100644
--- a/src/plugins/console/public/application/containers/editor/monaco/monaco_editor_output.tsx
+++ b/src/plugins/console/public/application/containers/editor/monaco/monaco_editor_output.tsx
@@ -6,14 +6,14 @@
  * Side Public License, v 1.
  */
 
-import React, { FunctionComponent, useEffect, useState } from 'react';
+import React, { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react';
 import { CodeEditor } from '@kbn/code-editor';
 import { css } from '@emotion/react';
 import { VectorTile } from '@mapbox/vector-tile';
 import Protobuf from 'pbf';
 import { i18n } from '@kbn/i18n';
 import { EuiScreenReaderOnly } from '@elastic/eui';
-import { CONSOLE_OUTPUT_THEME_ID, CONSOLE_OUTPUT_LANG_ID } from '@kbn/monaco';
+import { CONSOLE_OUTPUT_THEME_ID, CONSOLE_OUTPUT_LANG_ID, monaco } from '@kbn/monaco';
 import { useEditorReadContext, useRequestReadContext } from '../../../contexts';
 import { convertMapboxVectorTileToJson } from '../legacy/console_editor/mapbox_vector_tile';
 import {
@@ -22,6 +22,7 @@ import {
   safeExpandLiteralStrings,
   languageForContentType,
 } from '../utilities';
+import { useResizeCheckerUtils } from './use_resize_checker_utils';
 
 export const MonacoEditorOutput: FunctionComponent = () => {
   const { settings: readOnlySettings } = useEditorReadContext();
@@ -30,6 +31,19 @@ export const MonacoEditorOutput: FunctionComponent = () => {
   } = useRequestReadContext();
   const [value, setValue] = useState('');
   const [mode, setMode] = useState('text');
+  const divRef = useRef<HTMLDivElement | null>(null);
+  const { setupResizeChecker, destroyResizeChecker } = useResizeCheckerUtils();
+
+  const editorDidMountCallback = useCallback(
+    (editor: monaco.editor.IStandaloneCodeEditor) => {
+      setupResizeChecker(divRef.current!, editor);
+    },
+    [setupResizeChecker]
+  );
+
+  const editorWillUnmountCallback = useCallback(() => {
+    destroyResizeChecker();
+  }, [destroyResizeChecker]);
 
   useEffect(() => {
     if (data) {
@@ -69,6 +83,7 @@ export const MonacoEditorOutput: FunctionComponent = () => {
       css={css`
         width: 100%;
       `}
+      ref={divRef}
     >
       <EuiScreenReaderOnly>
         <label htmlFor={'ConAppOutputTextarea'}>
@@ -81,10 +96,13 @@ export const MonacoEditorOutput: FunctionComponent = () => {
         languageId={mode}
         value={value}
         fullWidth={true}
+        editorDidMount={editorDidMountCallback}
+        editorWillUnmount={editorWillUnmountCallback}
         options={{
           fontSize: readOnlySettings.fontSize,
           wordWrap: readOnlySettings.wrapMode === true ? 'on' : 'off',
           theme: mode === CONSOLE_OUTPUT_LANG_ID ? CONSOLE_OUTPUT_THEME_ID : undefined,
+          automaticLayout: true,
         }}
       />
     </div>
diff --git a/src/plugins/console/public/application/containers/editor/monaco/use_resize_checker_utils.ts b/src/plugins/console/public/application/containers/editor/monaco/use_resize_checker_utils.ts
new file mode 100644
index 0000000000000..985fe47601fe4
--- /dev/null
+++ b/src/plugins/console/public/application/containers/editor/monaco/use_resize_checker_utils.ts
@@ -0,0 +1,38 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { useRef } from 'react';
+import { ResizeChecker } from '@kbn/kibana-utils-plugin/public';
+import { monaco } from '@kbn/monaco';
+
+/**
+ * Hook that returns functions for setting up and destroying a {@link ResizeChecker}
+ * for a Monaco editor.
+ */
+export const useResizeCheckerUtils = () => {
+  const resizeChecker = useRef<ResizeChecker | null>(null);
+
+  const setupResizeChecker = (
+    divElement: HTMLDivElement,
+    editor: monaco.editor.IStandaloneCodeEditor
+  ) => {
+    if (resizeChecker.current) {
+      resizeChecker.current.destroy();
+    }
+    resizeChecker.current = new ResizeChecker(divElement);
+    resizeChecker.current.on('resize', () => {
+      editor.layout();
+    });
+  };
+
+  const destroyResizeChecker = () => {
+    resizeChecker.current!.destroy();
+  };
+
+  return { setupResizeChecker, destroyResizeChecker };
+};