如何使用flex-grow在容器中添加可滚动导航

Question

我正在尝试创建具有固定宽度的边栏和内容区域的简单布局。

在内容区域内，我想进行垂直滚动的导航。

我的问题是nowrap导航导致内容区域超出视口的大小。我希望导航栏在内容区域内可滚动。

Example codepen

这是标记

<main>

  <aside>
    Fixed width sidebar
  </aside>

  <article>
    <nav>
      <ul>
        <li>item 1</li>
        ... 
        <li>item 100</li>
      </ul>
    </nav>
  </article>

</main>

使用flexbox设置布局：

main {
  display: flex;
}

aside {
  flex: 0 0 340px;
}

article {
  flex: 1 0 auto;
}

nav {
  ul {
    overflow: auto;
    white-space: nowrap;

    li {
      display: inline-block; 
    }
  }
}

通过设置内容区域的宽度，我能够获得预期的结果：

article {
  flex: 1 0 auto;
  width: calc(100% - 340px);
}

但是，如果可能，我想避免。