title: Unable to set width of flexbox child to 100%
body: <p>I am learning CSS flexbox and was doing a simple layout where I wanted the first flex child to displayed with 100% width of the parent and rest flex items wrapping below. Also, the wrapped flex items should occupy width in a specific ratio (easy to set with 'flex' property). </p>
  
  <p>To do this I set "flex-basis" property of first flex item to 100% and set flex property of next 2 to the ratio I want. Here is what the pertinent CSS looks like (link to complete fiddle is below):</p>
  
  <pre><code>.main{
      max-width: 1000px;
      margin: 100px auto;
  
      display: flex;
      flex-flow: row wrap;
  }
  
  /*using ususal shorthand notation*/
  
  .flex-item:nth-child(1) {
     flex:1 100%;
  }
  
  .flex-item:nth-child(2) {
      flex:2;
  }
  
  .flex-item:nth-child(3) {
      flex:3;
  }
  </code></pre>
  
  <p>This should set the first item's width to 1000px and for the next two as 400px and 600px respectively; wrapped and displayed below the first child.</p>
  
  <p>But for some reason the CSS breaks, and the 2nd and 3rd items are pushed outside main container. </p>
  
  <p>What more strange is that adding margin to the flex items fixes the whole thing and I don't understand how this is happening (I must be doing something stupid). Even addding some border or padding to the '.flex-item' rule works.</p>
  
  <pre><code>.flex-item{
      margin: 5px;
  }
  </code></pre>
  
  <p>Here is the <a href="http://jsfiddle.net/abhimanyuPathania/7h4v9r53/2/" rel="noreferrer">JS Fiddle</a>. You can try un-commenting the '.flex-item' rule in CSS to see what is going on.</p>
  
  <p>I was lazy not to add the any prefixes (since almost every new browser supports it) ,but the problem is same across latest FF, IE and chrome.</p>