display: flex; vs calc(); performance

Question

I came up today in a discussion where I\'m wondering what is the most performant way of having two div\'s beside each other.

On one side, i love using display:flex

Answer 1

I ran a simple test out of curiosity and there don't seem to be any differences in performance between float+calc vs flex, other than IE rendering both much slower than FF and Chrome.

From a related article:

The new flexbox code has a lot fewer multi-pass layout codepaths. You can still hit multi-pass codepaths pretty easily though (e.g. flex-align: stretch is often 2-pass). In general, it should be much faster in the common case, but you can construct a case where it’s equally as slow.

That said, if you can get away with it, regular block layout (non-float), will usually be as fast or faster than new flexbox since it’s always single-pass. But new flexbox should be faster than using tables or writing custom JS-base layout code.

I'm pretty sure that calc() makes a block layout require multiple passes too :)

---

LE: There was a bug in Firefox that made reflows very slow when you had 4-5 nested flexboxes, but it was fixed in the latest versions (37+).