Minimum sizing of nested flexbox in Safari

[OliverJAsh]

I think I've stumbled into an instance of flexbug 1 in Safari, however the current documentation for this flexbug states that is it fixed.

Specifically: in Safari, a nested flexbox (i.e. a flex container which is also a flex item of a parent flex container) does not correctly apply minimum sizing.

Reduced test case: https://jsbin.com/dizifil/1/edit?html,css,output

(Pink border shows flex item which is also a nested flexbox.)

Chrome/Firefox have the expected behaviour:

The flex item should have a minimum size of its contents (i.e. the pink border should wrap around the inner black border).

I think this issue was alluded to in #241, but it doesn't look like this exception made it into the docs.

Also there doesn't appear to be a Safari/WebKit bug filed where we can track this.

If you agree, I would be happy to:

• raise a Safari/WebKit bug for this
• raise a PR to better document this Safari bug

[Scarg]

I agree, on Safari (Desktop, Mobile and especially Webview) the issue is still exactly the same as the one described in #241.

[LiddleDev]

I have just came across this bug also. Adding flex-shrink: 0 has fixed it for me in the meantime

[silverwind]

Still unfixed as of Safari 13.0.2.

[kevinsimper]

I was quite amazed to find out this bug appear in Safari, but work in Chrome and Firefox.

@LiddleDev Thank you 👍

@philipwalton Have you seen this error?

I made a small codepen that reproduces it:
https://codepen.io/kevinsimper/pen/qBEOMVx

[adamscybot]

Its still broken in Safari 14.0.1.

[adam-thomas-privitar]

It looks like its fixed in Safari 14.1.1.

[silverwind]

Also seems to work in Safari 15.1: