Issue #3273755 by frega, Dom., glynster, mherchel, claudiu.cristea, nayana_mvr, ifrik, Wim Leers, Reinmar, saidatom, catch: CKEditor 5 should not grow to infinite height

core/modules/ckeditor5/css/editor.css

@@ -9,13 +9,13 @@
   fill-opacity: 1 !important;
 }
 
-/**
- * Set the min-height equal to configuration value for the number of rows.
- *
- * The `--ck-min-height` value is set on the parent `.ck-editor` element by
- * JavaScript. We add that there because the `.ck-editor__editable` element's
- * inline styles are cleared on focus.
- */
 .ck-editor__main > :is(.ck-editor__editable, .ck-source-editing-area) {
+  /* Set the min-height equal to configuration value for the number of rows.
+   * The `--ck-min-height` value is set on the parent `.ck-editor` element by
+   * JavaScript. We add that there because the `.ck-editor__editable` element's
+   * inline styles are cleared on focus. */
   min-height: var(--ck-min-height);
+  /* Set the max-height to not grow beyond the height of the viewport (minus
+   * any toolbars. */
+  max-height: calc(100vh - var(--drupal-displace-offset-top, 0px) - var(--drupal-displace-offset-bottom, 0px) - 20px);
 }

core/modules/ckeditor5/tests/src/Nightwatch/Tests/ckEditor5EditorHeightTest.js

@@ -2,6 +2,8 @@ module.exports = {
   '@tags': ['core', 'ckeditor5'],
   before(browser) {
     browser.drupalInstall({ installProfile: 'minimal' });
+    // Set fixed (desktop-ish) size to ensure a maximum viewport.
+    browser.resizeWindow(1920, 1080);
   },
   after(browser) {
     browser.drupalUninstall();
@@ -100,6 +102,30 @@ module.exports = {
           },
         )
 
+        // Navigate to the create content page and measure max-height of the editor.
+        .drupalRelativeURL('/node/add/test')
+        .execute(
+          // eslint-disable-next-line func-names, prefer-arrow-callback, no-shadow
+          function () {
+            window.Drupal.CKEditor5Instances.forEach((instance) => {
+              instance.setData('<p>Llamas are cute.</p>'.repeat(100));
+            });
+
+            const height = document.querySelector(
+              '.ck-editor__editable',
+            ).clientHeight;
+
+            return height < window.innerHeight;
+          },
+          [],
+          (result) => {
+            browser.assert.ok(
+              result.value,
+              'Editor area should never exceed full viewport.',
+            );
+          },
+        )
+
         // Double the editor row count.
         .drupalRelativeURL('/admin/structure/types/manage/test/form-display')
         .waitForElementVisible(