title: flex column wont stretch to fill the column
body: <p>new to flex. Wonder why the the two div on the right won't take up the all the height space.</p>
  
  <p>What I am trying to get here is to have a big column on the left while the right column will be divided by two row</p>
  
  <p>css:</p>
  
  <pre><code>.card {
    display: -webkit-flex;
    display: flex;
    margin:8% auto auto auto;
    width:450px;
    height: 150px;
    min-height: 100px;
    color: black;
  }
  
  .left-tile {
    flex: 3;
    background: #02A0E5; 
  }
  
  right-tile {
    flex: 2 1 50%;
    background: #FD6800;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
  }
  
  .up-right-tile { 
   background: #D03324;
   flex: 2;
  }
  
  .low-right-tile {
    background: #FD6800;
    flex: 2;
  }
  </code></pre>
  
  <p>html</p>
  
  <pre><code>.container
    .card
      .left-tile
        .card-content
          .quote-content
            ....
      .right-tile
        .up-right-tile
          .twitter-button
            ....
        .low-right-tile
          .new-quote
            ....
  </code></pre>
  
  <p>the actual code pen code is <a href="http://codepen.io/ypan887/pen/PWWOqQ" rel="nofollow noreferrer">here</a> </p>