title: CSS Flex grid - Same width for last item
body: <p>Hey I am trying to create a responsive box layout for a gallery, which looks like this <a href="http://webdesignerwall.com/demo/responsive-column-grid/">http://webdesignerwall.com/demo/responsive-column-grid/</a></p>
  
  <p>The problem with the example is that the widths are hardcoded and media queries are necessary. I have way to many columns for that to be a feasible solution.</p>
  
  <p>I can achieve the same result with Flex girds, however the last column is larger than the others as shown in this CodePen: </p>
  
  <p><a href="http://codepen.io/anon/pen/zClcx">http://codepen.io/anon/pen/zClcx</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="flex-container same-width same-height"&gt;
    &lt;div class="flex-item"&gt;
      &lt;div&gt;g&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="flex-item"&gt;
      &lt;div&gt;g&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="flex-item"&gt;
      &lt;div&gt;g&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="flex-item"&gt;
      &lt;div&gt;why am I longer than my friends?&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.flex-container {
      display: -webkit-flex;
      display: flex;
      width: 100%;
      max-width: 950px;
      flex-wrap: wrap;
      justify-content: space-between;
      background: grey;
  
    &amp; &gt; * {
      min-width: 300px;
      background: green;
      max-width: 404px;
      flex: 1 1 auto;
    }
    .flex-item &gt; div {
      background: red;
    }
  }
  </code></pre>
  
  <p><strong>Question:</strong> <em>How can I make the last column the same size as the others?</em></p>