flex-basis and box-sizing
<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>