title: How do I get a lone element in the last line of a flexbox layout to look the same?
body: <p>I'm trying to create some CSS for a list of rectangles, with wrapping, that is responsive. The rectangles can contain a variable amount of text. The rectangles should have a minimum width of 300px, but can grow if there is more space available. It should work no matter the number of rectangles.</p>
  
  <p>This is an image of what I want it to look like, in a wide desktop screen, a normal desktop screen and a phone, roughly:</p>
  
  <p><a href="https://i.stack.imgur.com/48JXw.png"><img src="https://i.stack.imgur.com/48JXw.png" alt="Image showing target layout"></a></p>
  
  <p>(I realise that most phone and desktops are wider than that in pixels, but these numbers are easier to work with when it comes to SO's code snippets.)</p>
  
  <p>I'm trying three techniques, and none of them do what I want:</p>
  
  <h1>1. Flexbox doesn't work:</h1>
  
  <p>Flexbox would seem ideal for this job. The trouble with the flexbox implementation is that I can't find a way to make sure the last rectangle stays the same size as the rest, while also allowing the rectangles to grow in very wide screens. Here's an image of the best flexbox result that I could come up with, which has the problem with the last line:</p>
  
  <p><a href="https://i.stack.imgur.com/rawGR.png"><img src="https://i.stack.imgur.com/rawGR.png" alt=""></a></p>
  
  <p>Here's the code of the flexbox implementation:</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>.container {
    display: flex;
    flex-wrap: wrap;
  }
  .rect {
    flex: 1 0 300px;
    height: 150px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="rect" style="background-color: #2F80ED"&gt;&lt;/div&gt;
    &lt;div class="rect" style="background-color: #2D9CDB"&gt;&lt;/div&gt;
    &lt;div class="rect" style="background-color: #56CCF2"&gt;&lt;/div&gt;
    &lt;div class="rect" style="background-color: #A6E2F5"&gt;&lt;/div&gt;
    &lt;div class="rect" style="background-color: #D6EBF2"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <h1>2. <code>float: left</code> technique doesn't work:</h1>
  
  <p>Another responsive technique is to use floats, but I can't find a way to keep the rectangles the same width (with varying text content), while also allowing them to grow in the widest screens. Here's an image of what I ended up with:</p>
  
  <p><a href="https://i.stack.imgur.com/4wtw9.png"><img src="https://i.stack.imgur.com/4wtw9.png" alt="enter image description here"></a></p>
  
  <p>Here's the code of the <code>float: left</code> implementation:</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>.container:after {
    content: "";
    clear: both;
  }
  .rect {
    float: left;
    min-width: 300px;
    height: 150px;
    overflow-y: hidden;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="rect" style="background-color: #2F80ED"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod&lt;/div&gt;
    &lt;div class="rect" style="background-color: #2D9CDB"&gt;&lt;/div&gt;
    &lt;div class="rect" style="background-color: #56CCF2"&gt;Lorem ipsum dolor sit amet, consectetur&lt;/div&gt;
    &lt;div class="rect" style="background-color: #A6E2F5"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed&lt;/div&gt;
    &lt;div class="rect" style="background-color: #D6EBF2"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <h1>3. Why not media queries?</h1>
  
  <p>I'm looking for a solution that doesn't involve media queries, as media queries only let you put conditions on the screen width, and not on the <code>.container</code> width.</p>