title: CSS Grid Row Height Safari Bug
body: <p>I've made a grid template with rows of 1fr 1fr 1fr.  In the middle row, there are a list of inline images.  </p>
  
  <p>In Chrome and Firefox, the images respect the height of the grid row and adapt properly. However, in Safari 10.1.2 and Safari TP 31, there appears to be a combination of the images overflowing the row and not scaling the image widths appropriately.  </p>
  
  <p>Perhaps I'm doing something wrong?  Or is this a Safari bug?  And if so, is there a workaround?</p>
  
  <p>Safari 10.1</p>
  
  <p><a href="https://i.stack.imgur.com/oOUhN.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/oOUhN.jpg" alt="enter image description here"></a></p>
  
  <p>Safari TP</p>
  
  <p><a href="https://i.stack.imgur.com/fJPqZ.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/fJPqZ.jpg" alt="enter image description here"></a></p>
  
  <p>Chrome 60</p>
  
  <p><a href="https://i.stack.imgur.com/He5b4.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/He5b4.jpg" alt="enter image description here"></a></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>#grid {
    height: 100vh;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
  }
  
  #thumbnailContainer {
    position: inherit;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
  }
  
  img {
    display: inline;
    height: 100%;
    width: auto;
  }
  
  header,
  footer {
    background-color: dodgerblue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="grid"&gt;
    &lt;header&gt;Header&lt;/header&gt;
    &lt;div id="thumbnailContainer"&gt;
      &lt;img src="https://c2.staticflickr.com/8/7591/16903911106_b7ced9d758.jpg"&gt;
      &lt;img src="https://c1.staticflickr.com/9/8740/16927517701_810fcb2a7c.jpg"&gt;
      &lt;img src="https://c2.staticflickr.com/8/7637/16902583636_15138a68f0.jpg"&gt;
      &lt;img src="https://c2.staticflickr.com/8/7614/16927530091_6755845b13.jpg"&gt;
      &lt;img src="https://c1.staticflickr.com/9/8700/16741099010_d0ecd9df1f.jpg"&gt;
      &lt;img src="https://c1.staticflickr.com/9/8745/16927567841_74fd20d01d.jpg"&gt;
    &lt;/div&gt;
    &lt;footer&gt;Footer&lt;/footer&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/fqkjhh6m/1/" rel="noreferrer">https://jsfiddle.net/fqkjhh6m/1/</a></p>