css - 如何让导航栏在 css flex-box 中进入 100% 的页面（不是视口）？

Question

我试图让导航栏拉伸页面的高度。

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

main {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

nav {
  display: block;
  width: 60rem;
  background: blue;
  color: white;
  padding: 1rem;
  height: 100%;
}

section {
  padding: 1rem;
}

<main>
  <nav>some nav stuff</nav>
  <section>a tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall
    bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya
    tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall
    bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya
    tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall
    bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya
    tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall
    bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya
    tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall bodya tall body</section>
</main>

标签： cssflexbox