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

Border to fix Flexbug #11? #212

Open mdo opened 7 years ago

mdo commented 7 years ago

I've received a few issues in Bootstrap about this super sneaky bug for wrapping (equal-width) flex items across multiple lines. While fiddling around, I was wondering why this worked without issue in our docs and it turns out the reason is our borders. See https://output.jsbin.com/micohor/.

Unsure if this is a reasonable workaround for you, but it's easier than setting an explicit flex-basis as that requires you know the actual percentage to add. With the border fix, you can even do a very small decimal border-width like .000001px and the columns size and break properly.

screen shot 2017-03-26 at 12 23 48 pm

Related issues from Bootstrap:

philipwalton commented 7 years ago

Sorry to take a while to get to this.

Yeah, if that border trick works that seems like a better fix (or at least a good alternative) to the proposed workaround.

Unfortunately, I can't test it because it looks like the bug is fixed in Safari 11! \o/