title: css grid of squares with flexbox
body: <p>I am trying to create a responsive grid of squares. The squares should resize to fit the viewport's width. The squares should not resize when changing the viewport's height.</p>
  
  <p>I got how to adjust the width of each square, but I don't know how to make the elements square and how to scale their height when the viewport width changes. </p>
  
  <p>In the example at the fiddle below the seven squares should always fit horizontally, and they should scale as squares. I do not care how many rows are visible.</p>
  
  <p>Fiddle here <a href="http://jsfiddle.net/gonyhvz8/11/" rel="noreferrer">http://jsfiddle.net/gonyhvz8/11/</a></p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="flex-container"&gt;
      &lt;div class="flex-item"&gt;1&lt;/div&gt;
      &lt;div class="flex-item"&gt;2&lt;/div&gt;
      &lt;div class="flex-item"&gt;3&lt;/div&gt;
      &lt;div class="flex-item"&gt;4&lt;/div&gt;
      &lt;div class="flex-item"&gt;5&lt;/div&gt;
      &lt;div class="flex-item"&gt;6&lt;/div&gt;
      &lt;div class="flex-item"&gt;7&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="flex-container"&gt;
      &lt;div class="flex-item"&gt;1&lt;/div&gt;
      &lt;div class="flex-item"&gt;2&lt;/div&gt;
      &lt;div class="flex-item"&gt;3&lt;/div&gt;
      &lt;div class="flex-item"&gt;4&lt;/div&gt;
      &lt;div class="flex-item"&gt;5&lt;/div&gt;
      &lt;div class="flex-item"&gt;6&lt;/div&gt;
      &lt;div class="flex-item"&gt;7&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="flex-container"&gt;
      &lt;div class="flex-item"&gt;1&lt;/div&gt;
      &lt;div class="flex-item"&gt;2&lt;/div&gt;
      &lt;div class="flex-item"&gt;3&lt;/div&gt;
      &lt;div class="flex-item"&gt;4&lt;/div&gt;
      &lt;div class="flex-item"&gt;5&lt;/div&gt;
      &lt;div class="flex-item"&gt;6&lt;/div&gt;
      &lt;div class="flex-item"&gt;7&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="flex-container"&gt;
      &lt;div class="flex-item"&gt;1&lt;/div&gt;
      &lt;div class="flex-item"&gt;2&lt;/div&gt;
      &lt;div class="flex-item"&gt;3&lt;/div&gt;
      &lt;div class="flex-item"&gt;4&lt;/div&gt;
      &lt;div class="flex-item"&gt;5&lt;/div&gt;
      &lt;div class="flex-item"&gt;6&lt;/div&gt;
      &lt;div class="flex-item"&gt;7&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="flex-container"&gt;
      &lt;div class="flex-item"&gt;1&lt;/div&gt;
      &lt;div class="flex-item"&gt;2&lt;/div&gt;
      &lt;div class="flex-item"&gt;3&lt;/div&gt;
      &lt;div class="flex-item"&gt;4&lt;/div&gt;
      &lt;div class="flex-item"&gt;5&lt;/div&gt;
      &lt;div class="flex-item"&gt;6&lt;/div&gt;
      &lt;div class="flex-item"&gt;7&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="flex-container"&gt;
      &lt;div class="flex-item"&gt;1&lt;/div&gt;
      &lt;div class="flex-item"&gt;2&lt;/div&gt;
      &lt;div class="flex-item"&gt;3&lt;/div&gt;
      &lt;div class="flex-item"&gt;4&lt;/div&gt;
      &lt;div class="flex-item"&gt;5&lt;/div&gt;
      &lt;div class="flex-item"&gt;6&lt;/div&gt;
      &lt;div class="flex-item"&gt;7&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="flex-container"&gt;
      &lt;div class="flex-item"&gt;1&lt;/div&gt;
      &lt;div class="flex-item"&gt;2&lt;/div&gt;
      &lt;div class="flex-item"&gt;3&lt;/div&gt;
      &lt;div class="flex-item"&gt;4&lt;/div&gt;
      &lt;div class="flex-item"&gt;5&lt;/div&gt;
      &lt;div class="flex-item"&gt;6&lt;/div&gt;
      &lt;div class="flex-item"&gt;7&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>.flex-container {
    padding: 0;
    margin: 0;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row;
    justify-content: space-around;
    height: 50px;
    line-height:30px;
  }
  
  .flex-item {
    background: tomato;
    margin: 5px;
    color: white;
    font-weight: bold;
    font-size: 1.5em;
    text-align: center;
    flex: 1 0 0px;
    height: auto;
  }
  </code></pre>