Flexible box image `height: 100%` Safari

Given a flexible box with two children each at 50%, if an image is included inside one of the children with height: 100%, it consumes far more than desired in Safari.

<div class='wrapper'><div class='first'></div><div class="second"><img src="https://pixy.org/src/465/4654979.jpg"</div></div>

codepen

.wrapper {  display: flex;}.first {  flex-basis: 50%;}.second {  flex-basis: 50%;}img {  max-width: 100%;  height: 100%;  object-fit: cover;}