title: flex-basis and box-sizing
body: <p>According to <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis" rel="noreferrer"><code>flex-basis</code> MDN documentation</a> the <code>flex-basis</code> property calculates the size of a flex item related to the content box, unless a different option is defined by the <code>box-sizing</code> CSS property. But I didn't get the desired result neither in current Chrome nor in IE11.</p>
  
  <p>I have written 2 examples:</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>.horizontal-layout {
    display: flex;
    flex-direction: row;
  }
  header &gt; span {
    flex: 1 1 100%;
  }
  header &gt; .button {
    background-color: grey;
  }
  header &gt; .app-name {
    background-color: orange;
  }
  header#with-border-padding &gt; span {
    box-sizing: border-box; /* this is not useful at all */
  }
  header#with-border-padding &gt; .button {
    border: 1px solid black;
    padding-left: 5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header class="horizontal-layout"&gt;
    &lt;span class="button"&gt;A&lt;/span&gt;
    &lt;span class="app-name"&gt;B&lt;/span&gt;
    &lt;span class="button"&gt;C&lt;/span&gt;
  &lt;/header&gt;
  
  &lt;header id="with-border-padding" class="horizontal-layout"&gt;
    &lt;span class="button"&gt;A&lt;/span&gt;
    &lt;span class="app-name"&gt;B&lt;/span&gt;
    &lt;span class="button"&gt;C&lt;/span&gt;
  &lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <h2><a href="https://jsfiddle.net/AlexMM/pbkzj984/" rel="noreferrer">jsfiddle</a></h2>
  
  <ul>
  <li><strong>First example</strong> is a <code>&lt;header&gt;</code> with 3 <code>&lt;span&gt;</code> tags each one having a <code>flex: 1 1 100%</code> (<code>flex-basis</code> is 100%). So every <code>span</code> is given a third part of the <code>header</code>.</li>
  <li><strong>Second example</strong> is equal to first one, but in this case the second <code>span</code> has some border and some padding. I thought that <code>flex-grow</code> would make same result as first example but it didn't. Then I saw the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis" rel="noreferrer"><code>flex-basis</code> MDN documentation</a> and understood that I had to set <code>box-sizing: border-box;</code> to the flex items so that the <code>flex-basis</code> was related to the <code>border-box</code>. But it didn't either! <strong>Anyone knows why?</strong></li>
  </ul>
  
  <p>So thanks if someone can clarify about second example question.
  In my code you can easily compare the sizes given to the <code>&lt;span&gt;</code> tags between both examples.</p>