CSS Flexbox with x/y scrollbar: scrollable content breaks grid span

Question

I have a flexbox layout which has a scrollable area. This is how it should look:

The green section is meant to be twice as large as the yellow one.

The element which makes troubles is the right-most one. If the scrollable area contains large elements (e.g. 1000px), it breaks my layout and looks like this: (Edit: this is true for Firefox and Chrome - IE works)

I have created a Plunker for you to see my code:

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

Here is the same code as in the 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>

The 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;
}