Using flexbox why two images with different proportions stretch differently - css

Question

I want to make a flexbox grid for cards with one big image on left and two right images vertically aligned. Everything is fine and aligned for desktop at 1280px but when images stretch for responsive view, the image on the left is stretching more rapidly and cards are no more vertically aligned.
Here a codepen illustrating the problem:
https://codepen.io/actik/pen/xaZqmG
.wrap {
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
.flex {
display: flex;
box-sizing: border-box;
align-items: flex-start;
}
.row {
flex-flow: row wrap;
}
.col {
flex-flow: column wrap;
}
.structure-100 {
flex: 1 100%;
}
.structure-50 {
flex: 1 50%;
}
.content {
color: #fff;
background-color: #aa0000;
width: 100%;
flex: 1 100%;
}
.element_left {
flex: 1 50%;
padding-right: 15px;
padding-bottom: 30px;
}
.element_right {
flex: 1 50%;
padding-left: 15px;
padding-bottom: 30px;
}
.content-text {
padding: 0 10px;
}
img {
max-width: 100%;
height: auto;
align-self: center;
}
<div class="wrap">
<div class="flex row structure-100">
<div class="flex col structure-50">
<div class="flex element_left">
<div class="content">
<img src="http://www.placebacon.net/625/875/" alt="">
<div class="content-text">
<h2>Card title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum lacus vitae aliquam ullamcorper.</p>
</div>
</div>
</div>
</div>
<div class="flex col structure-50">
<div class="flex element_right">
<div class="content">
<img src="http://www.placebacon.net/625/360" alt="">
<div class="content-text">
<h2>Card title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum lacus vitae aliquam ullamcorper.</p>
</div>
</div>
</div>
<div class="flex element_right">
<div class="content">
<img src="http://www.placebacon.net/625/360" alt="">
<div class="content-text">
<h2>Card title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum lacus vitae aliquam ullamcorper.</p>
</div>
</div>
</div>
</div>
</div>
</div>
I made a lot of different tests and can't understand this behavior, any tips welcome, thanks for your help !
Editing : Here the version at 1280px working (title cards are aligned at the bottom) and the second version when reducing width, bottom of the 2 images and title cards are no more aligned. I want the red part add space at his bottom if necessary but keep image and title aligned.
working version
not working
Big image is squashed.

Answer 1

As I understood from our talk in the comments, your issue that the left section with the 'big' image (the images aren't present in the snippet you provided, they're present in the CodePen demo that tou do provided its link) isn't stretching as supposed, and that because in yourCSS you gave the .flex class a rule of align-items: flex-start; which means that the element of the flex container should be placed on the top (vertical), thus, it doesn't let the element to stretch, instead, you just have to replace this line align-items: flex-start; with align-items: stretch; in the .flex class, so that class becomes:
.flex {
display: flex;
box-sizing: border-box;
align-items: stretch;
}
And here's a runnable snippet:
$gutter: 30px;
.wrap{
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
.flex {
display: flex;
box-sizing: border-box;
align-items: stretch;
}
.row {
flex-flow: row wrap;
}
.col {
flex-flow: column wrap;
}
.structure-100 {
flex: 1 percentage(1/1);
}
.structure-50 {
flex: 1 percentage(1/2);
}
.content {
color: #fff;
background-color: #aa0000;
width: 100%;
flex: 1 100%;
}
.element_left .content {
display: flex;
flex-flow: column wrap;
}
.element_left {
flex: 1 percentage(1/2);
padding-right: $gutter / 2;
padding-bottom: $gutter;
}
.element_right {
flex: 1 percentage(1/2);
padding-left: $gutter / 2;
padding-bottom: $gutter;
}
.content-text {
padding: 0 10px;
}
.element_left .content .content-text {
flex-grow: 0;
margin-top: auto;
}
img {
max-width: 100%;
height: auto;
}
.element_left .content img {
width: 100%;
flex-grow: 1;
align-self: flex-start;
}
<div class="wrap">
<div class="flex row structure-100">
<div class="flex col structure-50">
<div class="flex element_left">
<div class="content">
<img src="http://www.placebacon.net/625/875/" alt="">
<div class="content-text">
<h2>Card title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum lacus vitae aliquam ullamcorper.</p>
</div>
</div>
</div>
</div>
<div class="flex col structure-50">
<div class="flex element_right">
<div class="content">
<img src="http://www.placebacon.net/625/360" alt="">
<div class="content-text">
<h2>Card title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum lacus vitae aliquam ullamcorper.</p>
</div>
</div>
</div>
<div class="flex element_right">
<div class="content">
<img src="http://www.placebacon.net/625/360" alt="">
<div class="content-text">
<h2>Card title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum lacus vitae aliquam ullamcorper.</p>
</div>
</div>
</div>
</div>
</div>
</div>
Hope I pushed you further.