Flexbox with percentage width on firefox not working

Question

I tried to archive a simple sidebar | content visually with normal floats and then I used the classic technique for equal height columns with (margin-bottom: -99999px; padding-bottom: 99999px etc) but I didn't like it and I had some issues here and there with this, so I decided to use flex-box, I tried it some time ago with fixed size width and it worked fine but now I have percentage width so it seems that firefox didn't like it at all...

This example shows how I normally expected flex-box to work, and it did fine in safari and chrome, but firefox just ignore percentage width... I found that it is a known issue of firefox but it is an old one and I thought they solved it already...

Then I tried something different in order to trick firefox, but still it wasn't want I expected because sidebar had different size from page to page based on content...

So I end up by giving up on flex-box with fluid layout and use something more simple that fit my needs...

But I'm curious to know if anyone solve this issue with any workaround or if we are all in the queue for this to be fixed by mozila...

Thanks!

Answer 1

I highly advise against using the margin-bottom: -99999px; padding-bottom: 99999px work-around. If you want a fluid layout(I assume this is what the question is about?) with 14%, 86% split, just use plain old CSS instead of Flex.

http://jsfiddle.net/97dtV/7/

Why re-invent the wheel. If you are looking for a better way of laying out your site, try the "grid" approach.

• Semantic Grid (http://semantic.gs/)
• Bootstrap - (http://twitter.github.com/bootstrap/index.html)

This assumes that you don't need flex for some specific reason, if you do then ignore this ;). Also, consider backward-compatibility when using CSS3 specific attributes!