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;, on the other side there is the option to use calc(), the reason is our div has padding and we need to reduce the width by the padding. Case:

<div class='container'>
 <div class='inner'></div>
 <div class='inner'></div>
</div>

Both should be on 50% width. The default css is:

* {
 -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
 -moz-box-sizing: border-box;    /* Firefox, other Gecko */
 box-sizing: border-box;         /* Opera/IE 8+ */
}
.container {
 height: 100%;
 width: 100%;
}
.inner {
 width: 50%;
 padding: 20px;
}

The display:flex; way would be additional:

.container {
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 flex-wrap: nowrap;
 align-items: stretch;
 align-content: stretch;
}

The calc() way would be:

.inner {
 width: calc(100% - 40px);
 display: inline-block;
}

or:

.inner {
 width: calc(100% - 40px);
 float: left;
}

I do not want any table layout in my css. Additionally, we do not need to take care of the browser versions, this should be only functional in the latest versions, always.

What would be recommended to use? What has more performance?

I already found an article that the performance has been increased already a lot. Link

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+).