如何使用css flexbox将列增长到与任一列的内容高度相同？

Question

演示：https://jsfiddle.net/chovy/7vgLpm9h/7/

我很难让导航与内容一样高（或者如果您删除内容与导航一样高的内容）。

两者都应该是最高柱高度的 100%。

我还需要将最后一个导航项放在导航栏的底部。

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

html,
body,
main {
  height: 100%;
  min-height: 100vh;
  width: 100vw;
}

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

aside {
  width: 100rem;
  border: 1px solid red;
  align-self: stretch;
  flex-grow: 1;
}

section {
  flex-grow: 1;
  border: 1px solid green;
}

nav li {
  margin-bottom: 1rem;
}

nav li:last-child {
  margin-top: auto;
  margin-bottom: 0;
  color: blue;
  font-weight: 700;
}

<main>
  <aside>
    <header>header</header>
    <nav>
      <ul>
        <li>link 1</li>
        <li>link 1</li>
        <li>link 1</li>
        <li>link 1</li>
        <li>link 1</li>
        <li>link 1</li>
        <li>link 1</li>
        <li>link 1</li>
      </ul>
    </nav>
  </aside>
  <section>
    grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column.
    grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column.
    grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column.
    grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column.
    grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column.
    grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column.
    grow this to 100% of either column.
  </section>
</main>

Answer 1

简化您的代码，如下所示。您必须删除一些不必要的属性

body {
  margin: 0;
}
main {
  min-height: 100vh;
  display: flex;
}
aside {
  width:100px;
  border: 1px solid red;
  display: flex;
  flex-direction: column;
}
nav {
  flex-grow: 1;
  display: flex;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
section {
  flex: 1;
  border: 1px solid green;
}
nav li:not(:last-child) {
  margin-bottom: 1rem;
}
nav li:last-child {
  margin-top: auto;
  color: blue;
  font-weight: 700;
}

<main>
  <aside>
    <header>header</header>
    <nav>
      <ul>
        <li>link 1</li>
        <li>link 1</li>
        <li>link 1</li>
        <li>link 1</li>
        <li>link 1</li>
        <li>link 1</li>
        <li>link 1</li>
        <li>link 1</li>
      </ul>
    </nav>
  </aside>
  <section>
    grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column.
    grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column.
    grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column.
    grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column.
    grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column.
    grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column.
    grow this to 100% of either column.
  </section>
</main>