为什么我的flexbox设置容器没有正确打破？

Question

我有一块卡片，这些卡片安排在一个容器内，如下所示：

<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>

我希望/确实使用flexbox安排这些卡片：

.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;
}

您也可以在此处查看：http://codepen.io/daiaiai/pen/mRGdaR

在那里你会看到我所遇到的问题是内部块没有正确地破坏新线。我需要做些什么才能使其正常工作？

非常感谢！