高さの異なる要素をflexboxで並べたい

Question

コンテンツの要素に応じて、高さが可変なブロックボックス要素をflexプロパティを用いて、揃えたいと考えています。

イメージ画像

上に示すレイアウトに対して、aside要素とnav要素がそれぞれ2つ、main要素が3つあるレイアウトをflexboxプロパティを用いて組みたいと考えています。
なお、main要素のコンテンツが最も多く、heightの値が合算して大きいため、asideとnavの下方は途中で切れ、親要素のbackground-colorで塗りつぶされる様な状態を想定しています。

大枠として考えているHTMLのコード

  <header>Header</header>
   <div class="content-body">
    <nav>
      <nav class="sidenav_1">NavNavNav</nav>
      <nav class="sidenav_2">NavNavNav</nav>
    </nav>
    <main>
      <main class="content_1">ContentContentContentContent</main>
      <main class="content_2">ContentContentContentContent</main>
      <main class="content_3">ContentContentContentContent</main>
    </main>
    <ads>
      <aside class="aside_1">Ads</aside>
      <aside class="aside_2">Ads</aside>
    </ads>
    </div>
   <footer>Footer</footer>
  </body>
コード

コードCSS
.content-body {
  display: flex;
  flex-direction: row;
}

.nav {
  display: flex;
  flex-direction: row;
}

............//header以下の親要素をrowにしつつ、navやmain内のboxはcolumnにしたい。。。。

としようと安易に考えたのですが、flexboxの性質上高さが揃ってしまうようです。

floatとclearfixを使ってやる方法は避けたいのですが何かヒントを頂けないでしょうか？

なお現状、レスポンシブは考慮に入れていません。

Answer 1

.content-body > * {
  align-self: flex-start;
}
```**動くサンプル：**[https://jsfiddle.net/vt30pfgx/](https://jsfiddle.net/vt30pfgx/)