Safari isn't stretching image to flexbox grid - css

Question

I'm trying to build a simple teaser grid for featured posts on a website using flexbox. It should look like this:
And in FF and Chrome it's all good. If i change the resolution of one image, all the others follow and update their size. But not in Safari. Whatever i do, it never fits to an equal height:
I really don't get the point why this is happening. Each image container on the right has exactly 50% of the height calculated by flexbox. And each image should be stretched to that height.
I could probably achieve this with background-size:cover but i would love to find a solution to use img tags instead.
Here's a demo: https://jsfiddle.net/7tjw8j83/1/
.featured-grid{
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}
img{
width: 100%;
height: 100%;
display: block;
object-fit:cover;
}
.left{
width: 66.6666%;
}
.right{
width: 33.3333%;
display: flex;
flex-direction: column;
}
.right-top{
background: green;
flex: 1;
}
.right-bottom{
background: red;
flex: 1;
}
<div class="featured-grid">
<div class="left">
<img src="https://unsplash.it/600/450?image=1055">
</div>
<div class="right">
<div class="right-top">
<img src="https://unsplash.it/600/400?image=1051">
</div>
<div class="right-bottom">
<img src="https://unsplash.it/600/400?image=1057">
</div>
</div>
</div>

Answer 1

In addition to Michaels suggestion, you could do like this, where I used background-image instead of img (since you use a given height anyway), and how to add text at an absolute position
html, body {
margin: 0;
}
.featured-grid{
display: flex;
height: 100vh;
}
div {
position: relative;
background-position: center;
background-repeat: no-reapat;
background-size: cover;
overflow: hidden;
}
.left {
width: 66.666%;
}
.right{
width: 33.333%;
display: flex;
flex-direction: column;
}
.right-top{
flex: 1;
}
.right-bottom{
flex: 1;
}
.text {
position: absolute;
left: 10px;
bottom: 10px;
color: white;
}
.text > * {
margin: 5px;
}
<div class="featured-grid">
<div class="left" style="background-image: url(https://unsplash.it/600/450?image=1055)">
<div class="text">
<h2>Title</h2>
<h3>Text</h3>
</div>
</div>
<div class="right">
<div class="right-top" style="background-image: url(https://unsplash.it/600/400?image=1051)">
<div class="text">
<h2>Title</h2>
<h3>Text</h3>
</div>
</div>
<div class="right-bottom" style="background-image: url(https://unsplash.it/600/400?image=1057)">
<div class="text">
<h2>Title</h2>
<h3>Text</h3>
</div>
</div>
</div>
</div>
Updated based on a comment
html, body {
margin: 0;
}
.featured-grid{
display: flex;
height: 100vh;
}
div {
position: relative;
overflow: hidden;
}
img{
width: 100%;
height: 100%;
display: block;
object-fit:cover;
}
.left {
width: 66.666%;
}
.right{
width: 33.333%;
display: flex;
flex-direction: column;
}
.right-top{
flex: 1;
}
.right-bottom{
flex: 1;
}
.text {
position: absolute;
left: 10px;
bottom: 10px;
color: white;
}
.text > * {
margin: 5px;
}
<div class="featured-grid">
<div class="left">
<img src="https://unsplash.it/600/450?image=1055">
<div class="text">
<h2>Title</h2>
<h3>Text</h3>
</div>
</div>
<div class="right">
<div class="right-top">
<img src="https://unsplash.it/600/400?image=1051">
<div class="text">
<h2>Title</h2>
<h3>Text</h3>
</div>
</div>
<div class="right-bottom">
<img src="https://unsplash.it/600/400?image=1057"> <div class="text">
<h2>Title</h2>
<h3>Text</h3>
</div>
</div>
</div>
</div>
Updated (2:nd) based on a comment
html,
body {
margin: 0;
}
.featured-grid {
display: flex;
}
div {
position: relative;
overflow: hidden;
}
img {
visibility: hidden;
display: block;
}
img.show {
position: absolute;
visibility: visible;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.left img {
max-height: 100vh;
}
.right img {
max-height: 50vh;
}
.left {
width: 66.666%;
}
.right {
width: 33.333%;
display: flex;
flex-direction: column;
}
.right-top {
flex: 1;
}
.right-bottom {
flex: 1;
}
.text {
position: absolute;
left: 10px;
bottom: 10px;
color: white;
}
.text > * {
margin: 5px;
}
<div class="featured-grid">
<div class="left">
<img src="https://unsplash.it/300/250?image=1055">
<img class="show" src="https://unsplash.it/300/250?image=1055">
<div class="text">
<h2>Title 1</h2>
<h3>Text 1</h3>
</div>
</div>
<div class="right">
<div class="right-top">
<img src="https://unsplash.it/300/200?image=1057">
<img class="show" src="https://unsplash.it/300/200?image=1057">
<div class="text">
<h2>Title 2</h2>
<h3>Text 2</h3>
</div>
</div>
<div class="right-bottom">
<img src="https://unsplash.it/300/200?image=1057">
<img class="show" src="https://unsplash.it/300/200?image=1057">
<div class="text">
<h2>Title 3</h2>
<h3>Text 3</h3>
</div>
</div>
</div>
</div>