title: How to achieve box-sizing functionality with flexbox?
body: <p>So I found out the hard way that flexbox doesn't respect the <code>box-sizing: border-box;</code> CSS declaration. Fine. But is there some way to get that functionality using a flexbox layout?</p>
  
  <p>Check out <a href="https://jsfiddle.net/a69r38z6/" rel="nofollow">this JS Fiddle</a>. We have 3 rows with 3 boxes in each row. I'd like all the boxes to be the same size. The middle box in the middle row has some margin &amp; border properties making it bigger. In the box model, we would solve that with <code>box-sizing: border-box</code>. Is there some equivalent in the flexbox model?</p>
  
  <p><strong>Live Demo:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {    
    for(var i = 1; i &lt;= 3; i++) {
      $('&lt;div class="row" id="row' + i + '"&gt;').appendTo($('#grid'));
      
      for(var j = 0; j &lt; 3; j++) {
        if(i === 2 &amp;&amp; j === 1) {
          $('&lt;div class="box2"&gt;').appendTo($('#row' + i));
        } else {
          $('&lt;div class="box"&gt;').appendTo($('#row' + i));
        }
      }
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 300px;
  }
  
  body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
  }
  
  #grid {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 25px solid cornflowerblue;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  .row {
    width: 100%;
    height: auto;
    margin: 10px;
    box-sizing: border-box;
    border: 1px solid red;
    display: flex;
  }
  
  .box {
    flex-grow: 1;
    margin: 10px;
    background: pink;
  }
  
  .box2 {
    flex-grow: 1;
    margin: 10px;
    box-sizing: border-box;
    border: 25px solid purple;
    background: orange;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;body&gt;
    &lt;div id="grid"&gt;&lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>