flexbugs
flexbugs copied to clipboard
philipwalton
Minimum sizing of nested flexbox in Safari
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 https://github.com/philipwalton/flexbugs/issues/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
I agree, on Safari (Desktop, Mobile and especially Webview) the issue is still exactly the same as the one described in #241.
I have just came across this bug also. Adding flex-shrink: 0 has fixed it for me in the meantime
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
