Fallback for old (and annoying) browsers for a creative use of “Flex-Box”


I'm not a big fan of questions that provide some criteria without reasoning for a solution to be acceptable but in this case, I have one too: No JavaScript for compatibility, except Modernizr. (The reason is that they slow the page down too much.)

I used the new and fancy CSS3 flex-box to create a menu, which displays some extra links, if there is some extra space. You can see a (hopefully) working demo here.

The big question is: How can I provide a fallback for the (cough)annoying(/cough) Internet Explorer and the old browsers without using the somewhat famous FlexieJS library? Is this achievable with just css2, other than setting a maximum percentage width for the menu (ul)s (which does not really work)? Could you at least point me in the right direction? Thanks!


I gave another try but still couldn't figure it out on my own. Any help is really appreciated! Thanks a lot =) You can find my attempt here.


If you want to use new features in old browsers, you are going to need to use js to fix it up. If you write a fallback for IE in CSS, you might as well use the same code in every other browser.

It might be worth reading http://oli.jp/2011/css3-flexbox/ and http://www.xanthir.com/blog/b4580 as well for a few reasons why flexbox is unlikely to catch on – the CSS templating module seems to be a much better solution.

Being a huge fan of cross-browser compatibility, I'm not a huge fan of CSS3. I think that if you can achieve something using pure CSS, why use Javascript? If you're looking for simple a fallback for CSS2, use overflow: hidden. I'll do my best to explain how this simple attribute can essentially achieve the same effect.

By : Wex

This video can help you solving your question :)
By: admin