Flexbox：如何将网格项放置在多个行或列的流中

Question

在这里的imgur专辑中，第一张图片是目前的样子，第二张图片是我希望它看起来像的样片。

第三张图片显示紫色框自动生成以填充窗口的所有空间。

http://imgur.com/a/MD338

我使用flexbox来包含红色和紫色框。但是，当我使红色框的高度跨越多行而不是流入其他行时，它会推动上下行。

这是包含div的当前CSS：

@include flexbox((
          display: box,
          box-orient: horizontal,
          box-pack: justify,
          box-align: center
), $version: 1);
@include flexbox((
          display: flexbox,
          flex-direction: row,
          flex-pack: justify,
          flex-align: center
), $version: 2);
@include flexbox((
          display: flex,
          flex-direction: row,
          justify-content: left,
          align-items: center,
          flex-wrap: wrap
), $version: 3);

是否可以在flexbox中修复此问题，还是需要使用其他内容？