title: Difference between width and flex-basis
body: <p>I've encountered difference in behavior between <code>width</code> and <code>flex-basis</code> which I am not able to explain by <a href="https://stackoverflow.com/questions/34352140/what-are-the-differences-between-flex-basis-and-width">What are the differences between flex-basis and width?</a>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.outer {
    display: flex;
    background: yellow;
    padding: 10px;
  }
  .middle {
    display: flex;
    flex-shrink: 0;
    background: red;
    padding: 10px;
  }
  .inner {
    flex-basis: 258px;
    flex-shrink: 0;
    display: flex;
    flex-grow: 0;
    background: green;
  }
  .inner2 {
    width: 258px;
    flex-shrink: 0;
    display: flex;
    flex-grow: 0;
    background: green;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="outer"&gt;
    &lt;div class="middle"&gt;
      &lt;div class="inner"&gt;
        hello
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="outer"&gt;
    &lt;div class="middle"&gt;
      &lt;div class="inner2"&gt;
        hello
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://codepen.io/Dremora/pen/dXzoBg?editors=1100" rel="nofollow noreferrer">Here</a> is the example illustrating the problem I'm having. I'm expecting both rows to look the same, however, when using <code>flex-basis</code> (row 1), the flex container (<code>.middle</code> element) seems to ignore intrinsic width of its child (<code>.inner</code> element) and only takes the text into account.</p>
  
  <p>This difference can be observed in the latest versions of Chrome, FF and Safari (but not in IE11/Edge).</p>
  
  <p><em>Clarification</em>: I'm not asking why IE11/Edge behaves the way it does. Its behaviour (in this case) actually seems logical to me. I'm asking why there is difference in all other browsers.</p>
  
  <p><em>Update</em>: Edge 13 behaves just like IE11.</p>