Bug 219279

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