Equal Column Heights with Boostrap and Flexbox - css

Question

I'm trying to style a gallery using Bootstrap and Flexbox where there is one large image and beside it is two smaller, stacked images and have both be the same height.
The container columns seem to be doing their job and staying the same height but I need the img within the column to fill the height of the container.
It works in Firefox if I use height: 100% on the img but this breaks in both Chrome and Safari.
img {
max-width: 100%;
width: auto\9;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
figure {
margin-bottom: 0;
}
.rts-col {
margin-bottom: 30px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="rts-col col-8">
<figure>
<img src="http://via.placeholder.com/1400x933">
</figure>
</div>
<div class="rts-col col-4">
<figure style="margin-bottom: 30px;">
<img src="http://via.placeholder.com/1400x933">
</figure>
<figure>
<img src="http://via.placeholder.com/1400x933">
</figure>
</div>
</div>
</div>
Here's the markup and stylesheet: https://jsfiddle.net/tylorreimer/q8qe5p80/2/

Answer 1

Looks to me as though you need nested flexboxes where you have multiple images on one side.
img {
max-width: 100%;
width: auto\9;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
figure {
margin: 0;
}
.rts-col.split {
display: flex;
flex-direction: column;
justify-content: space-between;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="rts-col col-8">
<figure>
<img src="http://via.placeholder.com/1400x933">
</figure>
</div>
<div class="rts-col col-4 split">
<figure>
<img src="http://via.placeholder.com/1400x933">
</figure>
<figure>
<img src="http://via.placeholder.com/1400x933">
</figure>
</div>
</div>
</div>

Answer 2

If you make the col-4 a flex container with column direction, you can then use justify-content and its space-between to align those 2 image top/bottom
Add d-flex flex-column justify-content-between to your <div class="rts-col col-4"> so it becomes <div class="rts-col col-4 d-flex flex-column justify-content-between">
Note, I also removed some of your margins to make them align better
img {
display: block;
max-width: 100%;
}
figure {
margin: 0;
}
.rts-col {
margin-bottom: 30px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="rts-col col-8">
<figure>
<img src="http://via.placeholder.com/1400x933">
</figure>
</div>
<div class="rts-col col-4 d-flex flex-column justify-content-between">
<figure>
<img src="http://via.placeholder.com/1400x933">
</figure>
<figure>
<img src="http://via.placeholder.com/1400x933">
</figure>
</div>
<div class="rts-col col-6">
<figure>
<img src="http://via.placeholder.com/1400x933">
</figure>
</div>
<div class="rts-col col-6">
<figure>
<img src="http://via.placeholder.com/1400x933">
</figure>
</div>
</div>
</div>