How to fix Gutenberg editor overlap issue in Chrome 77

The recent update of Google Chrome 77 has broken the layout of webpages in Gutenberg and elsewhere where a height of 100% applies in the CSS.

Here’s how this can be fixed for Gutenberg editor so the entry content can be seen again.

But first, before and after screenshots.

Before:

After:

Step 1

The following code can go inside your active theme’s functions.php or a custom functionality plugin or in a snippet using the Code Snippets plugin.

Install and activate Code Snippets plugin.

Go to Snippets > Add New.

Title: Fix Gutenberg editor issue with Chrome 77

Code:

/**
 * Modify the height of a specific CSS class to fix an issue in Chrome 77 with Gutenberg.
 *
 * @see https://github.com/WordPress/gutenberg/issues/17406
 */
add_action(
	'admin_head',
	function() {
		echo '<style>.block-editor-writing-flow { height: auto; }</style>'; // phpcs:ignore
	}
);

Credit: James Burke via.