Eu fiz um modelo de grade com linhas de 1fr 1fr 1fr. Na linha do meio, há uma lista de imagens embutidas.

No Chrome e Firefox, as imagens respeitam a altura da linha da grade e se adaptam adequadamente. No entanto, no Safari 10.1.2 e no Safari TP 31, parece haver uma combinação das imagens que ultrapassam a linha e não dimensionam adequadamente as larguras da imagem.

Talvez eu esteja fazendo algo errado? Ou isso é um bug do Safari? E se sim, existe uma solução alternativa?

Safari 10.1

Safari TP

Chrome 60

#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;
}

<div id="grid">
  <header>Header</header>
  <div id="thumbnailContainer">
    <img src="https://c2.staticflickr.com/8/7591/16903911106_b7ced9d758.jpg">
    <img src="https://c1.staticflickr.com/9/8740/16927517701_810fcb2a7c.jpg">
    <img src="https://c2.staticflickr.com/8/7637/16902583636_15138a68f0.jpg">
    <img src="https://c2.staticflickr.com/8/7614/16927530091_6755845b13.jpg">
    <img src="https://c1.staticflickr.com/9/8700/16741099010_d0ecd9df1f.jpg">
    <img src="https://c1.staticflickr.com/9/8745/16927567841_74fd20d01d.jpg">
  </div>
  <footer>Footer</footer>
</div>

https://jsfiddle.net/fqkjhh6m/1/