title: Understanding flex-basis in flex shorthand
body: <p>I understand flex-grow: it allows a flex item to grow based on a ratio relative to the other flex items on the same row/column.</p>
  
  <p>I understand flex-shrink: it allows a flex item to shrink based on a ratio relative to the other flex items on the same row/column.</p>
  
  <p>I understand flex-basis: it overrules the main-size value and sets it's width (or height, depending on orientation).</p>
  
  <p>However, I don't understand <code>flex-basis: auto || 0</code> and the like. </p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="one item"&gt;Box 1&lt;/div&gt;
    &lt;div class="two item"&gt;Box 2&lt;/div&gt;
    &lt;div class="three item"&gt;Box 3&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and css:</p>
  
  <pre><code>.container {
    display: flex;
  }
  
  .item {
    border: solid red 1px;
    padding: 5px;
  }
  
  .one {
    flex: 1 0 100px;
  }
  
  .two {
    flex: 1 0 auto;
  }
  
  .three {
    flex: 1 0 auto;
  }
  </code></pre>
  
  <p>I expected that all three boxes would be the same size, since they all are set to <code>flex-grow: 1</code>. However, not only is this not the case, Box one is bigger than either box <em>and</em> larger than 100px.</p>
  
  <p>What is making the sizes be uneven despite the even ratio of flex-grow and the flex-basis of box 1 to be ignored?</p>