title: Flex items have no height in Safari
body: <p>I am creating a complex grid layout using Flexbox <em>(CSS Grid is not supported by browsers I'm needing to support)</em> and I have the layout working completely as expected in Chrome and Firefox, but on Safari the majority of my flex-items have 0 height and are not displaying correctly.</p>
  
  <p>I've created a CodePen so demonstrate where my code is at (Apologies for the CSS, had to copy and paste from my project output)
  <a href="https://s.codepen.io/glennflanagan82/debug/NgPXJR/LQkExPgxmyxA" rel="noreferrer">https://s.codepen.io/glennflanagan82/debug/NgPXJR/LQkExPgxmyxA</a></p>
  
  <p>If you visit the link above on <strong>Chrome/Firefox</strong> you should see the grid layout with the hover functionality on the tiles, but on <strong>Safari</strong> none of the images display and none of the text. I have determined this is Safari setting the <code>grid-tile__link</code> elements to have 0 height but I don't understand why.</p>
  
  <p>I'm totally stumped on this so any help would be appreciated.</p>