带有x / y滚动条的CSS Flexbox：可滚动内容会中断网格范围

Question

我有一个具有可滚动区域的flexbox布局。这应该是它的样子：

绿色部分的大小是黄色部分的两倍。

制造麻烦的因素是最右边的。如果可滚动区域包含大型元素（例如1000px），则会破坏我的布局，如下所示： （编辑：这适用于Firefox和Chrome - IE正常工作）

我为你创建了一个Plunker来查看我的代码：

http://plnkr.co/edit/OnYZ8o8fzvkonW39oema?p=preview

以下是与Plunker相同的代码......

<div class="container">
  <div class="left">
    LEFT
  </div>
  <div class="right">
      <div class="fullheight">
        100% Height using flex-boxes
      </div>
      <div class="fullheight">
        <big>... scrollable<br />... scrollable<br />... scrollable</big>
        <big>... scrollable<br />... scrollable<br />... scrollable</big>
      </div> 
      <div class="fullheight noscroll">
        <header>Header</header>
        <div class="scrollcontainer">
          <div class="somethingbig">Something big</div>
        </div>
      </div> 
  </div>
</div>

CSS：

.container {
  display:flex;
  flex:1 1 auto;
  flex-direction:row;
  background:#fcc;
  padding: 3px;
  margin-bottom:20px;
  /*height:200px;*/
}
.left, .right {
  flex:1 1 1px;
  background:#ffc;
  padding: 3px;
  margin:3px;
}
.right {
  display:flex;
  flex:2 2 1px;
  background:#ccffcc;
}
.right > .fullheight {
  flex:1 1 1px;
  border: 1px solid red;
  overflow:auto;
  display:flex;
}
.fullheight.noscroll {
  display:flex;
  flex-direction:column;
}
.scrollcontainer {
  overflow:auto;
}