Overlapping CSS flexbox items in Safari

The element is shrinking. You need to set the flex-shrink property to 0 on the shrinking element.

main >div:first-child {
  -webkit-flex: 0;
  flex-shrink: 0;
}