How to set the height of CKEditor 5 (Classic Editor)

Answering my own question as it might help others.

CKEditor 5 no longer comes with a configuration setting to change its height. The height can be easily controlled with CSS.

There is one tricky thing though, if you use the Classic Editor:

<div id="editor1"></div>

ClassicEditor
    .create( document.querySelector( '#editor1' ) )
    .then( editor => {
        // console.log( editor );
    } )
    .catch( error => {
        console.error( error );
    } );

Then the Classic Editor will hide the original element (with id editor1) and render next to it. That's why changing height of #editor1 via CSS will not work.

The simplified HTML structure, after CKEditor 5 (the Classic Editor) renders, looks as follows:

<!-- This one gets hidden -->
<div id="editor1" style="display:none"></div> 
<div class="ck-reset ck-editor..." ...>
    <div ...>
        <!-- This is the editable element -->
        <div class="ck-blurred ck-editor__editable ck-rounded-corners ck-editor__editable_inline" role="textbox" aria-label="Rich Text Editor, main" contenteditable="true">
            ...
        </div>
    </div>
</div>

In reality the HTML is much more complex, because the whole CKEditor UI is rendered. However the most important element is the "editing area" (or "editing box") marked with a ck-editor__editable_inline class:

<div class="... ck-editor__editable ck-editor__editable_inline ..."> ... </div>

The "editing area" is the white rectangle where one can enter the text. So to style / change the height of the editing area, it is enough to target the editable element with CSS:

<style>
.ck-editor__editable_inline {
    min-height: 400px;
}
</style>

Setting the height via a global stylesheet. Just add to your common .css file (like style.css):

.ck-editor__editable {
    min-height: 500px;
}

In the case of ReactJS.

<CKEditor
    editor={ClassicEditor}
    data="<p>Hello from CKEditor 5!</p>"
    onInit={(editor) => {
        // You can store the "editor" and use when it is needed.
        // console.log("Editor is ready to use!", editor);
        editor.editing.view.change((writer) => {
        writer.setStyle(
            "height",
            "200px",
            editor.editing.view.document.getRoot()
        );
        });
    }}
/>