search

philipwalton / flexbugs

A community-curated list of flexbox issues and cross-browser workarounds for them.
MIT License
13.63k stars 495 forks source link

Minimum sizing of nested flexbox in Safari #271

Open OliverJAsh opened 5 years ago

OliverJAsh commented 5 years ago

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:

Scarg commented 5 years ago

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

LiddleDev commented 5 years ago

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

silverwind commented 5 years ago

Still unfixed as of Safari 13.0.2.

kevinsimper commented 4 years ago

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

image

adamscybot commented 3 years ago

Its still broken in Safari 14.0.1.

adam-thomas-privitar commented 3 years ago

It looks like its fixed in Safari 14.1.1.

silverwind commented 3 years ago

Also seems to work in Safari 15.1:

image