Bug 219279 – Nested flex container incorrectly shrinks to zero or cuts off content

• Component: Layout and Rendering
• Status: RESOLVED WORKSFORME

Only when also set to display: flex, elements in flex containers are allowed to shrink to as little as zero height ignoring their content height. This doesn't affect Chrome or Firefox: https://jsfiddle.net/4sd2pzuw/

In this test case, the "B" content is reduced to 0 height and is not visible only in Safari. The real difference between A/B/C is only that B has style="display: flex", and if this is removed, its content displays without being cut off and C is shifted downward. (The fact that one child element is also a flex container shouldn't allow it to shrink to zero.)

Setting .content { height: 100px; } for grandchild elements produces the same result: the set content height is ignored for the nested flex container and it's reduced to as little as zero height.

It looks like issue 146020 may have been intended to fix this general problem but doesn't in this case. Issue 146020 comment #35 may have included this case but I don't see it filed. I can't be sure if any other bugs are reporting the same issue. Not sure which Chromium ticket may have addressed this bug, but this one includes a test case that seems to remain unfixed in Safari: https://bugs.chromium.org/p/chromium/issues/detail?id=596743

* bug 146020 comment #34

[Sergio Villar Senin]

Thanks for the report. This has been already fixed in trunk. I landed several patches related to nested flexboxes, very likely bug 210089 or bug 215369 (or a combination of the two).

No idea when it will be shipped in Safari, but I'd say that sooner than later.

It seems fixed in Safari Technology Preview release 116. Sorry, did not think to test there.