title: Make flex child to grow according to sibling's height
body: <p>I have two article summaries contained in the same parent, and I need one of the child elements (the one with the background image) to stretch if the other article has longer content.</p>
  
  <p>I figured if I walked down from the parent ensuring that everything is set to display flex, and then on my child set the flex grow property everything would work out, but instead of growing the content's height to match it's sibling, it pushed out the width of the area (unacceptable).</p>
  
  <p>Please take a look at my fiddle (looks like its only "working" in chrome as of now) and let me know if you can be of any help.</p>
  
  <p><a href="https://jsfiddle.net/yjs4goob/1/" rel="nofollow">Fiddle</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code> article {
     float: left;
     width: 50%;
     padding-right: 0.75em;
     display: flex;
     flex-direction: column;
   }
   .article-type-wrapper {
     display: block;
     background-color: #999999;
     color: white;
     padding-top: 15px;
     padding-bottom: 15px;
     height: 60px;
   }
   header {
     display: flex;
     padding: 0 1.5em 20px 1.5em;
     background: url(//i.istockimg.com/file_thumbview_approve/83599047/6/stock-photo-83599047-sun-orange-yellow-and-rays-background.jpg);
     background-size: cover;
   }
   h3 {
     flex: 1 0 auto;
     margin: 0;
     padding-top: 60px;
     padding-bottom: 60px;
     padding-left: 25px;
     font-weight: lighter;
     color: black;
   }
   * {
     box-sizing: border-box;
   }
   .flex-wrapper {
     display: flex;
     flex-direction: row;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="flex-wrapper"&gt;
  
    &lt;article&gt;
  
      &lt;div class="article-type-wrapper"&gt;
        &lt;div class="article-types"&gt;
          &lt;span class="article-type"&gt;Image Gallery&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;a href="#"&gt;
        &lt;header class="article-header"&gt;
          &lt;h3&gt;Article title in background area, longer title that wraps and makes this one longer &lt;/h3&gt;
        &lt;/header&gt;
      &lt;/a&gt;
  
    &lt;/article&gt;
  
    &lt;article&gt;
  
      &lt;div class="article-type-wrapper"&gt;
        &lt;div class="article-types"&gt;
          &lt;span class="article-type"&gt;Image Gallery&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;a href="#"&gt;
        &lt;header class="article-header"&gt;
          &lt;h3&gt;Short title&lt;/h3&gt;
        &lt;/header&gt;
      &lt;/a&gt;
  
    &lt;/article&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>P.S. JavaScript IS NOT an acceptable solution to this question.</p>