title: Flexbox grid proportional scaling
body: <p>I have a flexbox layout, it's actually 3 x 3 but I can illustrate with 2 x 2 <a href="https://jsfiddle.net/chrispink/j43wsnfm/3/" rel="nofollow"><code>Fiddle</code></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.grid-container {
    width: 480px; /* Max */
    display: flex;
    flex-flow: row wrap;
  }
  
  .grid-cell {
    flex: 1;
    background: #ccc;
    width: 50%
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="grid-container"&gt;
    &lt;div class="grid-cell"&gt;&lt;img src="http://www.bathfringe.co.uk/wordpress/wp-content/uploads/street-icon.jpg"/&gt;&lt;/div&gt;
    &lt;div class="grid-cell"&gt;&lt;img src="http://www.bathfringe.co.uk/wordpress/wp-content/uploads/street-icon.jpg"/&gt;&lt;/div&gt;
    &lt;div class="grid-cell"&gt;&lt;img src="http://www.bathfringe.co.uk/wordpress/wp-content/uploads/street-icon.jpg"/&gt;&lt;/div&gt;
    &lt;div class="grid-cell"&gt;&lt;img src="http://www.bathfringe.co.uk/wordpress/wp-content/uploads/street-icon.jpg"/&gt;&lt;/div&gt;
    &lt;div class="grid-cell"&gt;&lt;img src="http://www.bathfringe.co.uk/wordpress/wp-content/uploads/street-icon.jpg"/&gt;&lt;/div&gt;
    &lt;div class="grid-cell"&gt;&lt;img src="http://www.bathfringe.co.uk/wordpress/wp-content/uploads/street-icon.jpg"/&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So that works but the images don't resize as the grid gets smaller, if I add <code>.grid-cell img { width: 100%;}</code> the cells all fit on one line. If I take away <code>.grid-cell {width: 50%;}</code> the same happens. </p>
  
  <p>Strangely, in Firefox my desired effect is achieved; the grid shrinks proportionately. In Chrome and Safari, even with -webkit- syntax, it behaves as above. The height of each cell remains constant as the grid gets narrower and the image overflows. </p>