Flexbox：内容溢出时如何实现50％的宽度？

Question

我有一个nav栏和一个main区域，分为2个相等的一半，left和right。

当left一半包含溢出其宽度的wide元素时，main的50/​​50分区会中断，导致left占用超过50％。

为什么会这样？

我怎么能避免这种情况？

＆＃13;

＆＃13;

.container {
  display: flex;
  height: 100px;
  background-color: #ccc;
  width: 300px;
}
nav {
  flex-shrink: 0;
  background-color: #aaa;
}
main {
  display: flex;
  flex: 1;
}
.left {
  flex: 1 0 50%;
  background-color: #bbb;
  overflow: auto;
}
.wide {
  width: 300px;
}
.right {
  flex: 1 0 50%;
}

＆＃13;

<div class="container">
  <nav>Navigation</nav>
  <main>
    <div class="left">
      <div class="wide">Left</div>
    </div>
    <div class="right">Right</div>
  </main>
</div>

＆＃13;

＆＃13;

＆＃13;