title: display: flex; vs calc(); performance
body: <p>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.</p>
  
  <p>On one side, i love using <code>display:flex;</code>, on the other side there is the option to use <code>calc()</code>, the reason is our div has padding and we need to reduce the width by the padding. Case:</p>
  
  <pre><code>&lt;div class='container'&gt;
   &lt;div class='inner'&gt;&lt;/div&gt;
   &lt;div class='inner'&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Both should be on 50% width. The default css is:</p>
  
  <pre><code>* {
   -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;
  }
  </code></pre>
  
  <p>The <code>display:flex;</code> way would be additional:</p>
  
  <pre><code>.container {
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   flex-wrap: nowrap;
   align-items: stretch;
   align-content: stretch;
  }
  </code></pre>
  
  <p>The <code>calc()</code> way would be:</p>
  
  <pre><code>.inner {
   width: calc(100% - 40px);
   display: inline-block;
  }
  </code></pre>
  
  <p>or:</p>
  
  <pre><code>.inner {
   width: calc(100% - 40px);
   float: left;
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>What would be recommended to use? What has more performance?</p>
  
  <p>I already found an article that the performance has been increased already a lot. <a href="http://updates.html5rocks.com/2013/10/Flexbox-layout-isn-t-slow">Link</a></p>