Image stretching in flexbox in Safari

Question

This is only an issue in Safari and looks like a Safari bug to me. Here is a fiddle with a simplified version of the issue.

When an image is in a nested flexbox elem

Answer 1

See my demo for a working example, add flex-direction: column; to fix this issue.

.container {
  display: flex;
  flex-direction: column;
}

.container section:first-child {
  display: flex;
  flex-direction: column;
  margin-bottom: 25px;
}

.container img {
  width: 125px;
  height: auto;
}