title: Prevent a flex items height from expanding to match other flex items
body: <p>I have two elements inside a container, which are being side-by-side by using flex box. On the second element (<code>.flexbox-2</code>), I am setting it's height in the CSS. However, then the first element (<code>.flexbox-1</code>) will match the height of <code>.flexbox-2</code>. How would I stop <code>.flexbox-1</code> from matching the height of <code>.flexbox-2</code>, and instead just retain its natural height? </p>
  
  <p>Here is what I have so far (also available <a href="http://jsfiddle.net/5yb73cn9/" rel="noreferrer">as a jsFiddle</a>)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    display: -webkit-flex;
    -webkit-flex-direction: row;
  }
  .flexbox-1 {
    -webkit-flex: 1;
    border: solid 3px red;
  }
  .flexbox-2 {
    -webkit-flex: 2;
    border: solid 3px blue;
    height: 200px;
    margin-left: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="flexbox-1"&gt;.flexbox-1&lt;/div&gt;
    &lt;div class="flexbox-2"&gt;.flexbox-2&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>