Gutenberg: IE11: the meta boxes area overlays the post

[afercia]

Previously #5503.

See also #13328, #11378, and #12455.

Tested with:

• Windows 10
• Internet Explorer 11
• WordPress trunk (5.1)
• Yoast SEO 9.5

Note: I've used the JS snippet from #12455 and the browser is running in Standards mode.

Depending on the length of the post content, the meta boxes area is misplaced: it doesn't stay at the bottom of the page. This is more noticeable when collapsing the meta boxes area, see screenshot below:

• make sure the post has some lengthy content
• collapse the meta box area
• scroll the page

[friendofpa]

I can confirm that this issue is still persisting. If the post body exceeds the desired height from text length the post body element is overflowing through the post meta box elements. As seen in image below:

• Yoast SEO, Custom Fields Plugins
• Chrome: (Windows 10) Version 74.0.3729.157

[LordSimal]

I got the same problem with the current Chrome Version 77 but not with Version 76 or Firefox 69 or Safari 12.1.2

I already created a Chrome Issues since it seems to be a render issue.

See https://wordpress.org/support/topic/yoast-12-0-breaks-gutenberg/ for the details

[LordSimal]

FYI: My Problem is actually https://github.com/WordPress/gutenberg/issues/17406 which already includes a temporary fix.

[kajcula]

In CSS display for .edit-post-layout__content element is set to flex but I think that it isn't necessary. All Gutenberg blocks are stacked one below the other inside this edit-post-layout__content, so this should fix the issue: Set display to block for admin styles:

.edit-post-layout__content {
  display: block;
}