我的flexbox divs在列中对齐。我需要它们在一列中对齐一个然后在另一行中对齐两个div

Question

我正在尝试使用左侧垂直导航的Flexbox，其高度为100％，旁边是高度为30％的标题，内容空间占据其他70％的高度。我只是在学习如何编写抱歉。

<div id="wrapper">
  <nav>
  </nav>
  <div id="column2">
    <header>
    </header>
    <main>
    </main>
  </div>
</div>

#wrapper {
  display: flex;
  flex-flow: column;
  min-height: 100em;
}

nav {
  flex: 1;
  background-color: blue;
  height: 50em;
  width:20em;
}

#column2 {
  width: 60%;
  background-color: red;
  display: flex;
  flex-direction: column;
  height: 50em;
  flex-basis: 100em;
}

header {
  background-color: red;
  flex: 1;
  height: 20em;
  justify-content: flex-end;
}

main {
  background-color: pink;
  flex: 1;
  height: 30em;
  justify-content: flex-end;
}

Answer 1

html, body {
  height: 100%;
}

#wrapper {
  display: flex;
  height: 100%;
}

nav {
  background-color: blue;
  flex: 0 0 30%;
}

#content {
  display: flex;
  flex: 0 0 70%;
  flex-flow: column;
}

header{
  background-color: green;
  flex: 0 0 30%;
}

main {
  background-color: red;
  flex: 0 0 70%;
}

<div id="wrapper">
  <nav>
  </nav>
  <div id="content">
    <header>
    </header>
    <main>
    </main>
  </div>
</div>