Why is my flexbox set container not breaking correctly? - html

Question

I have a block of cards which are arranged within a container like so:
<div class="projekt_wrapper">
<div class="projekt_card">
<div class="projekt_breadcrumb"><span>Headline</span><span>The title</span></div>
<div class="projekt_container">
<h1>Title again - for you</h1>
<p>Caption for the image</p></div>
</div>
<div class="projekt_card">
<div class="projekt_breadcrumb"><span>Headline</span><span>The title</span></div>
<div class="projekt_container">
<h1>Title again - for you</h1>
<p>Caption for the image</p></div>
</div>
<div class="projekt_card">
<div class="projekt_breadcrumb"><span>Headline</span><span>The title</span></div>
<div class="projekt_container">
<h1>Title again - for you</h1>
<p>Caption for the image</p></div>
</div>
</div>
And I want/do arrange these cards with flexbox like so:
.projekt_wrapper{
width:91.68vw;
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 200vh;
max-height: 8000px;
font-size: 0;
}
.projekt_card{
width:50%;
margin:0;
}
.projekt_card *{
max-width:100%;
}
.projekt_container{
background: url(https://dl.dropboxusercontent.com/u/1207766/projekte-digitalready.jpg) no-repeat;
background-size:cover;
min-height:100vh;
padding-top:20vh;
}
.projekt_container h1, .projekt_container p{
color:red;
text-align:center;
max-width:600px;
margin:0 auto;
padding-bottom: 2vh;
}
.projekt_container p{
border-bottom:1px solid red;
padding-bottom:5vh;
}
.projekt_container img{
margin:8vh 48%;
max-width:4vw;
}
You may also have a look at it right here: http://codepen.io/daiaiai/pen/mRGdaR
And there you'll see the problem that I have by them inner-blocks not breaking into a new line correctly. What do I need to do to make it work correctly?
Thanks a lot!