diff --git a/gutenberg.php b/gutenberg.php
index 327a6dba8e76fc..39e042e4e501e2 100644
--- a/gutenberg.php
+++ b/gutenberg.php
@@ -567,3 +567,27 @@ function gutenberg_add_responsive_body_class( $classes ) {
 }
 
 add_filter( 'body_class', 'gutenberg_add_responsive_body_class' );
+
+
+/**
+ * Prints JavaScript to detect whether the browser is in standards mode or not.
+ *
+ * @since 4.5
+ */
+function gutenberg_detect_quirks_mode() {
+	?>
+	<script type="text/javascript">
+		document.addEventListener( 'DOMContentLoaded', function() {
+			try {
+				var documentMode = document.compatMode==='CSS1Compat'?'Standards':'Quirks';
+				if (documentMode != 'Standards' ) {
+					console.log( 'You are in ' + documentMode + ' mode.' );
+					document.body.className += ' ' + 'is-quirks-mode';
+				}
+			} catch( e ) { }
+		} );
+	</script>
+	<?php
+}
+add_action( 'admin_print_scripts-post.php', 'gutenberg_detect_quirks_mode' );
+add_action( 'admin_print_scripts-post-new.php', 'gutenberg_detect_quirks_mode' );
diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
index 0cd4a03af0dfeb..ca3785d6a59602 100644
--- a/packages/edit-post/src/components/layout/style.scss
+++ b/packages/edit-post/src/components/layout/style.scss
@@ -103,6 +103,13 @@
 		@supports (position: sticky) {
 			flex-basis: 100%;
 		}
+
+		// This is an ugly hack that applies a table display to the main editing canvas when the browser is
+		// detected to be in quirks mode. Without this hack in quirks mode, the flexbox rules we use to size
+		// the various elements do not work, causing overlap.
+		.is-quirks-mode & {
+			display: table;
+		}
 	}
 
 	.edit-post-layout__metaboxes {