How to add scrollable navigation in a container with flex-grow

Question

I'm trying to create a simple layout with a fixed width sidebar and a content area.

Inside the content area I want to have navigation that is vertically scrollable.

My problem is that the nowrap nav is causing the content area to extend beyond the size of the viewport. I want the nav to be scrollable inside the content area.

Example codepen

This is the markup

<main>

  <aside>
    Fixed width sidebar
  </aside>

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

</main>

The layout is set using 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; 
    }
  }
}

I was able to get the expected result by setting the width of the content area:

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

But, I would like to avoid it if possible.