title: Negative margin not working with flexbox
body: <p>I'm trying to create a grid layout with the help of the flexbox. </p>
  
  <p>What I'm doing is that I'm giving parent negative margin on left and right and then giving its child the same amount of padding on left and right for the gutter space. </p>
  
  <p>I'm trying to make 5 column grid and when I use <code>flex: 1 1 20%</code> all the columns are not coming in the same row. The last get wrapped in the next row. This should not be the case as <code>flex-basis</code> is set to 20% and parent should accommodate all five columns in one row.</p>
  
  <p>But when I'm trying to do this, the 4th grid item is getting wrapped on the next line. </p>
  
  <p>Here is the working codepen for this issue.
  Updated the codepen: 
  <a href="https://codepen.io/vikrantnegi007/pen/BZwGJQ" rel="nofollow noreferrer">https://codepen.io/vikrantnegi007/pen/BZwGJQ</a></p>
  
  <p>Thanks.</p>