Flexbugs: a list of flexbox bugs and cross-browser solutions to them

[quixoticyc]

https://github.com/philipwalton/flexbugs/

[charlieirish]

Flexbox certainly looks like it will remove some of those 'hit-head-on-desk-again' moments. There's a ton of learning available for free in Sean Fioritto's course:

http://www.sketchingwithcss.com/flexbox-tutorial/

which is nothing short of excellent.

[scotty79]

I can't believe that flexbox is the best thing they could come up with.

What are the js libraries for doing layout that the standards people could inspire themselves with?

I know isotope.js but thats just for some things.

[janfoeh → scotty79]

I have only bookmarked this, not played with it, but you might be interested in http://gridstylesheets.org, an implementation of the Cassowary Constraint Solver.

[ahoge → scotty79]

> I can't believe that flexbox is the best thing they could come up with.

Flexbox is pretty damn good:

http://philipwalton.github.io/solved-by-flexbox/

Also, in case you didn't know, there is also Grid Layout:

http://gridbyexample.com/

Flexbox is 1D, Grid Layout is 2D.

[mradmin]

I'm working on a project that uses flexbox heavily and the layout was not tested in IE during the development process. (I guess the developers assumed IE11 was modern enough!) I joined the project late, and my task was to get the layout to work in IE11. Oh my what a task it was.

Anyway, here are some bugs I found (specifially related to IE11): https://gist.github.com/badsyntax/6eb3a74d35e52373c17c

[freshyill → mradmin]

I've been going all-in on flexbox, knowing full well that I'm going to have to manage these IE11 issues. Well, it's just about time to pay the piper. This will be very helpful, thanks!

[Brajeshwar]

This is super awesome. I've been meaning to transition our folks to Flexbox for web apps that targets mostly modern browsers. The main objections are, of course, browser support. This is a good start for me to take more informed decision. :-)

[Bahamut → Brajeshwar]

Just be aware, figuring out workarounds for some of these flexbox bugs in the wild can be a bit tricky - I ran into the min-height one not being respected on all browsers but Chrome, but I was able to find a different workaround in order to get it to play nice on all browsers.

[arunitc → Bahamut]

What is the workaround you are using? I too am facing the same problem in IE and am evaluating multiple options.

[cheeze]

IE is responsible for 4/5 of the bugs. Color me shocked.

[philipwalton → cheeze]

Flexbugs creator here. For what it's worth, all of these bugs have been fixed in the tech preview of Internet Explorer 12. Also, my co-maintainer (Greg Whitworth) is a member of the IE team, and he's been as adamant as anyone that we educate people on the shortcomings of older IE versions, so we can all build better websites.

This isn't about assigning blame, it's about empowering developers to be able to use flexbox today.

[mradmin → philipwalton]

Is IE11 really considered "old"? IMO, these fixes need to be released for IE11, because flexbox is supposed to work in IE11.

[frik → mradmin]

Exactly, MS should fix HTML5 bugs in IE11.

IE12 will be Win10-only (at least it won't run in Win7 as the normal support ends very soon) If the rumours are true, IE12 will come without the IE compatibility modes (IE7-10). And IE11 will ship as legacy browser next to IE11 for corporate users. So fixing the bugs in IE11 is even more important.

[Vecrios]

I'm currently in the process of designing my website using Flexbox. I love it, but ran into the problem of min-height. This should come in for sure. Thanks!

[andyshora]

Excellent! Thanks for sharing.