由Flexbox阻止的Div大小调整

Question

我的页面有两个div：一个位于页面的左侧，包含一个nav，可以通过JavaScript水平调整大小。另一个div位于页面的右侧，包含页面的内容（内容可以包含许多项目，包括本身就是flexbox的项目。）

问题是左侧面板只允许我调整到目前为止，然后停止就好像它撞到墙上一样。右边的弹性项目阻止我进一步扩展。

http://codepen.io/anon/pen/GWWLRK

如何根据用户的需要调整左侧的大小？

谢谢。

<div class="page">
  <div class="container">
    <div class="nav">
      <ul>
        <li>item 1</li>
        <li>item 2</li>
      </ul>
      <div class="nav-resize-bar"></div>
    </div>
    <div class="right">
      page's content goes over here.  it could contain anything, including flexible items:
      <div class="flex-parent">
        <div>Drag the black bar to see that you can only make the yellow section so big - it then gets stopped by these flex items.</div>
        <div>efgh efgh efgh</div>
        <div>ijkl ijkl ijkl ijkl</div>
        <div>mnop mnop</div>
      </div>
    </div>
  </div>
</div>