Long page names overflow their container in explorer menu in Safari 9

Issue Summary

Initially reported by @jjanssen in #3645. Page names that wrap to a second/third line overflow their container, in both Mobile Safari iOS 9 and (desktop) Safari 9.1 (works in version 10.1).

Related to: https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored

Steps to Reproduce

1. Create a page with a long title (100+ chars, create it at the “Homepage” level to get to it faster).
2. Add children to the page so the > caret is displayed in its menu item.
3. Open the pages explorer menu and navigate to the location of this page in the page tree.

Technical details

• Latest Wagtail / 1.11 RC
• Mobile Safari iOS 9 and (desktop) Safari 9.1

Edit: I spent about half an hour playing with every variation of layout properties I could think of, to no effect. Unless I’ve missed something obvious (further attempts welcome), I’d probably opt to rebuild this __link component without Flexbox.

[jckpn]

@jjanssen Ah, my bad – I didn’t create any children pages when I tested it. I’ll see if I can find a fix 😃

[jjanssen]

I’m closing this due the release of Safari 11 for OSX and iOS. According to our browser support we only support the last 2 versions.