Twenty Nineteen: On single posts with featured images, tall menus appear clipped

[kjellr]

When viewing posts with featured images on desktop screens, tall menus are contained only within the featured image/header area. Overflow is cut off:

A fix (removing overflow: hidden; from .site-header.featured-image) was pursued over on the Twenty Nineteen Github, but it led to problems in Internet Explorer:

​https://github.com/WordPress/twentynineteen/pull/724

---

Originally reported on the Twenty Nineteen GitHub repository:

​https://github.com/WordPress/twentynineteen/issues/720

[sabernhardt]

tall menu is clipped in WordPress 5.4, any browser (shown in Internet Explorer 11)

[sabernhardt]

IE11: header section without hiding overflow

[sabernhardt]

Edge: header section without hiding overflow

[sabernhardt]

hiding only horizontal overflow in IE11, the header image still overlaps the content section

[sabernhardt]

The header section was set to overflow: hidden to solve overflow issues in both Microsoft Edge and Internet Explorer.

In both of those browsers, the overflow would have extended beyond the window, adding the vertical scrollbar. In Internet Explorer 11, the bottom of the image also extends below the header, overlapping the content section.

I think part of the solution would be to remove overflow: hidden from the image header section and to add overflow-x: hidden on either the body tag or the page wrapper div. The header image still overlaps the content section in IE11, if somebody could figure that part out.

[mikeicode]

I ran into this on a .com site and reproduced on a .org site also. The title of this issue says "posts", but it also happens on pages that have the featured images (there is a Customizer setting on this theme to display featured images on pages). The menu items get cut off on desktop and mobile.