title: How to get flexbox to include padding in calculations?
body: <p>Below are two rows.</p>
  
  <ul>
  <li><p><strong>First row</strong> is two items at <code>flex 1</code> and one at <code>flex 2</code>.</p></li>
  <li><p><strong>Second Row</strong> is two items at <code>flex 1</code>.</p></li>
  </ul>
  
  <p>According to the spec <strong>1A + 1B = 2A</strong></p>
  
  <p>But when <strong>padding</strong> is included in the calculation the sum is incorrect as you can see in the example below.</p>
  
  <hr>
  
  <p><strong>QUESTION</strong></p>
  
  <p>How to get flex box to include padding into its calculation so the boxes in the example line up correctly?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.Row{
    display:flex;
  }
  .Item{
    display:flex;
    flex:1;
    flex-direction:column;
    padding:0 10px 10px 0;
  }
  .Item &gt; div{
    background:#7ae;
  }
  .Flx2{
    flex:2;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="Row"&gt;
    &lt;div class="Item"&gt;
      &lt;div&gt;1A&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="Item"&gt;
      &lt;div&gt;1B&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="Item Flx2"&gt;
      &lt;div&gt;1C&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="Row"&gt;
    &lt;div class="Item"&gt;
      &lt;div&gt;2A&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="Item"&gt;
      &lt;div&gt;2B&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>