why do flexbox children have the same height?

Question

I have two items inside a flex container, I gave the first item a specific height and I want the other's height to fits its actual content.

So the code is pretty simple: jsfiddle

.main {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row nowrap;
  /* Safari 6.1+ */
  flex-flow: row nowrap;
}
.sub {
  border: 1px black solid;
  flex-grow: 1;
}
#sub1 {
  height: 300px;
  margin-right: 50px;
}

<div class="main">
  <div class="sub" id="sub1">&nbsp;</div>
  <div class="sub" id="sub2">&nbsp;</div>
</div>

As you can see the second div stretched as the first ones's height increased, so how to prevent that, how to make the next child with no height specification hold its actual height as its actual content

Answer 1

Because the default value for align-items is stretch. Change that to flex-start if you want them to be top aligned and no stretch.

.main {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
}
.sub {
  border: 1px black solid;
  flex-grow: 1;
}
#sub1 {
  height: 300px;
  margin-right: 50px;
}

<div class="main">
  <div class="sub" id="sub1">&nbsp;</div>
  <div class="sub" id="sub2">&nbsp;</div>
</div>