title: Squares in squares with flexbox
body: <p>I am trying to recreate the following layout with flexbox:
  <a href="https://i.stack.imgur.com/Fmuk2.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Fmuk2.jpg" alt="enter image description here"></a></p>
  
  <p>I am almost there layout wise, but I am getting some weird flex-wrap behaviour like this: </p>
  
  <p><a href="https://i.stack.imgur.com/qH8Jq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qH8Jq.png" alt="enter image description here"></a></p>
  
  <p>My css is as follows:</p>
  
  <pre><code>.parent {
      display: flex;
      justify-content: space-between;
      .square-container {
        width: calc(33% - 1.333px);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
  
      &amp;:before {
        content:'';
        float:left;
        padding-top:100%;
        }
  
        .small-square {
            width: calc(50% - 2px);
            height: calc(50% - 2px);
            background: red;
            flex-shrink: 0;
        }     
      }
  }
  </code></pre>
  
  <p>The html is as follows:</p>
  
  <pre><code>&lt;div class="parent"&gt;
    &lt;div class="square-container"&gt;
      &lt;div class="small-square"&gt;&lt;/div&gt;
      &lt;div class="small-square"&gt;&lt;/div&gt;
      &lt;div class="small-square"&gt;&lt;/div&gt;
      &lt;div class="small-square"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="square-container"&gt;
      &lt;div class="small-square"&gt;&lt;/div&gt;
      &lt;div class="small-square"&gt;&lt;/div&gt;
      &lt;div class="small-square"&gt;&lt;/div&gt;
      &lt;div class="small-square"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="large-square"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I feel that I am missing some important flexbox property here. Thank you for your help!</p>