Flexbox equal height doesn't work - html

Question

I am trying to use flexbox with susy, but somehow it won't work.
I tried all questions I found here but it always breaks and doesn't keep the same height for text containers and image containers, mobile view works from 38 em on it doesnt.
This is what I tried, as soon as I add display: flex to the listed items in the container it displays all in one row, instead of stacked.
I also figured I have to use display box for the image...
http://codepen.io/HendrikEng/pen/wWyBGv
<div class="l-wrap-page">
<!-- Start Main Content Wrapper -->
<div class="l-wrap-main">
<!-- Start Quote -->
<div class="c-quote">
<h2 class="c-quote__title">Quote</h2>
<div class="c-quote__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<button class"o-btn">mehr</button>
</div>
<!-- End Quote -->
<!-- Start Content Block -->
<div class="c-block">
<div class="c-block__item">
<div class="o-media">
<img src="http://dummyimage.com/650x325/000/fff" alt="">
</div>
</div>
<div class="c-block__item">
<div class="c-block-article">
<h3 class="c-block-article__title">Headline</h3>
<div class="c-block-article__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<button class"o-btn">mehr</button>
</div>
</div>
</div>
<div class="c-block__item">
<div class="o-media">
<img src="http://dummyimage.com/650x325/000/fff" alt="">
</div>
</div>
<div class="c-block__item">
<div class="c-block-article">
<h3 class="c-block-article__title">Headline</h3>
<div class="c-block-article__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<button class"o-btn">mehr</button>
</div>
</div>
</div>
<div class="c-block__item">
<div class="o-media">
<img src="http://dummyimage.com/650x325/000/fff" alt="">
</div>
</div>
<div class="c-block__item">
<div class="c-block-article">
<h3 class="c-block-article__title">Headline</h3>
<div class="c-block-article__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<button class"o-btn">mehr</button>
</div>
</div>
</div>
</div>
<!-- End Content Block -->
</div>
CSS:
*, *:before, *:after {
box-sizing: border-box;
}
.l-wrap-page {
max-width: 100%;
margin-left: auto;
margin-right: auto;
background-image: -owg-linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25));
background-image: -webkit-linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25));
background-image: -webkit-linear-gradient(left, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25));
background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25));
background-size: 50%;
background-origin: content-box;
background-clip: content-box;
background-position: left top;
}
.l-wrap-page:after {
content: " ";
display: block;
clear: both;
}
.l-wrap-main {
width: 100%;
float: left;
}
.c-quote {
width: 100%;
float: left;
}
.c-block {
width: 100%;
float: left;
}
.c-block:after {
clear: both;
content: '';
display: table;
}
.c-block__item {
width: 100%;
float: left;
}
.c-block__item:last-child {
float: right;
}
#media (min-width: 39.8em) {
.l-wrap-main {
width: 100%;
float: left;
}
.c-quote {
width: 100%;
float: left;
}
.c-block {
width: 100%;
float: left;
}
.c-block:after {
clear: both;
content: '';
display: table;
}
.c-block__item:nth-child(1), .c-block__item:nth-child(5) {
width: 50%;
float: left;
background: rgba(248, 208, 220, 0.5);
}
.c-block__item:nth-child(3), .c-block__item:nth-child(8) {
width: 50%;
float: right;
background: rgba(248, 208, 220, 0.5);
}
.c-block__item:nth-child(2), .c-block__item:nth-child(6) {
width: 50%;
float: right;
background: rgba(248, 250, 251, 0.5);
}
.c-block__item:nth-child(4), .c-block__item:nth-child(8) {
width: 50%;
float: left;
background: rgba(248, 250, 251, 0.5);
}
.c-block__item:last-child {
float: right;
}
}
h2 {
font-size: 48px;
}
h2.o-headline {
text-align: center;
}
.c-block__item img {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: block;
width: 100%;
}
.l-wrap-main {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
overflow: hidden;
width: 100%;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.c-block {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}

Answer 1

When you create a flex container (display: flex or display: inline-flex), it comes with several default settings. Here are just a few:
justify-content: flex-start - flex items will stack at the start of the line
flex-wrap: nowrap - flex items are forced to stay in a single line
flex-shrink: 1 - flex items are allowed to shrink
align-items: stretch - flex items will expand to cover the cross-size of the container
flex-direction: row - flex items will align horizontally
Note the last setting. If you want your flex items to stack vertically, override this default setting (on the container) with flex-direction: column.
OR, you could turn on wrap (flex-wrap: wrap) and give each item enough width to force it to the next line. For example, width: 100% on each item, with wrap on the container, can create a single column of flex items.
For more info about flex equal height columns see:
Equal Height Columns with Flexbox
Equal height rows in a flex container
In this case, try update the .c-block rule like this
Updated codepen
.c-block {
display: flex; /* added property */
flex-wrap: wrap; /* added property */
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}