title: Flex items with same height in same row
body: <p>I have a div (<code>.news-container</code>) display flex. Inside that div, I have 5 items, the first one is 100% width, the other 4 are 50% width. The problem is those 4 items don't have the same height even they are flex item with <code>align-content: stretch</code>. Are they supposed to have same height when we set parent display flex or did i do something wrong here?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    font-family: "Open Sans", Arial, sans-serif;
  }
  
  a {
    text-decoration: none;
  }
  
  h1,
  h2,
  h3,
  h4,
  h5 {
    margin: 0 0 20px 0;
  }
  
  .clearfix::after {
    content: "";
    clear: both;
    display: table;
  }
  
  .content {
    margin: 20px auto;
  }
  
  .float-content {
    float: left;
  }
  
  .left-content {
    width: 60%;
  }
  
  .right-content {
    width: 40%;
  }
  
  .news-container {
    display: flex;
    flex-wrap: wrap;
    padding-right: 5px;
    overflow: hidden;
    align-items: stretch;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  
  .news-list-container {
    padding-left: 5px;
  }
  
  .news-container .item {
    position: relative;
    margin-bottom: 10px;
    width: calc(50% - 5px);
    padding: 0;
  }
  
  .news-container .item:nth-child(even) {
    margin-right: 10px;
  }
  
  .news-container .item:first-child {
    width: 100%;
    margin-right: 0;
  }
  
  .news-container .item .news-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background: #DC191B;
    color: #fff;
    padding: 10px;
    text-transform: uppercase;
  }
  
  .news-container .item img {
    width: 100%;
    display: block;
    margin-bottom: 0;
  }
  
  .news-container .item a.caption {
    display: block;
    padding: 10px 20px 13px 20px;
    background-color: #000;
    color: #fff;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 28px;
    font-weight: bold;
  }
  
  @media screen and (min-width: 1200px) {
    .content {
      max-width: 970px;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div class="content clearfix"&gt;
      &lt;div class="left-content float-content"&gt;
        &lt;div class="news-container"&gt;
          &lt;div class="item"&gt;
            &lt;a class="news-link" href="#"&gt;
                          New
                      &lt;/a&gt;
            &lt;img src="https://www.w3schools.com/html/pic_trulli.jpg" /&gt;
            &lt;a class="caption" href="#" target="_blank"&gt;
                          Lorem ipsum
                      &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
            &lt;img src="https://www.w3schools.com/html/pic_trulli.jpg" /&gt;
            &lt;a class="caption" href="#" target="_blank"&gt;
                          Lorem ipsum dolor sit amet
                      &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
            &lt;img src="https://www.w3schools.com/html/pic_trulli.jpg" /&gt;
            &lt;a class="caption" href="#" target="_blank"&gt;
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a turpis sagittis, viverra nibh a, lobortis libero.
                      &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
            &lt;img src="https://www.w3schools.com/html/pic_trulli.jpg" /&gt;
            &lt;a class="caption" href="#" target="_blank"&gt;
                          Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
                      &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
            &lt;img src="https://www.w3schools.com/html/pic_trulli.jpg" /&gt;
            &lt;a class="caption" href="#" target="_blank"&gt;
                          Quisque sed tincidunt neque. Sed ut lacinia ex.
                      &lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="right-content float-content"&gt;
        &lt;div class="news-list-container"&gt;
          &lt;h2&gt;
            Latest update
          &lt;/h2&gt;
          &lt;ul&gt;
            &lt;li&gt;
              News Number 1
            &lt;/li&gt;
            &lt;li&gt;
              News Number 2
            &lt;/li&gt;
            &lt;li&gt;
              News Number 3
            &lt;/li&gt;
            &lt;li&gt;
              News Number 4
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>