Prevent a flex items height from expanding to match other flex items

Question

I have two elements inside a container, which are being side-by-side by using flex box. On the second element (.flexbox-2), I am setting it's height in the CSS. However, then the first element (.flexbox-1) will match the height of .flexbox-2. How would I stop .flexbox-1 from matching the height of .flexbox-2, and instead just retain its natural height?

Here is what I have so far (also available as a jsFiddle)

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

<div class="container">    <div class="flexbox-1">.flexbox-1</div>    <div class="flexbox-2">.flexbox-2</div>  </div>

Answer 1

I know this is an old question but a better solution is to set the flex item to align to the top using flex-start.

/* Default Styles */  .container {    display: flex;  }  .flexbox-2 {    flex: 2;    border: solid 3px blue;    height: 200px;    margin-left: 10px;  }   .flexbox-1 {    flex: 1;      align-self: flex-start;      border: solid 3px red;  }

<div class="container">    <div class="flexbox-1">"align-self: flex-start;"</div>    <div class="flexbox-2">.flexbox-2</div>  </div>