CSS / Flexbox Chrome未正确调整大小

Question

使用以下简化的Flexbox代码时，有人可以建议为什么Chrome似乎无法正确解决问题吗？

＆＃13;

＆＃13;

<div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%">
  <div style="display: flex; flex-direction: column; width: 100%; height: 100%">
    <div style="width: 100%; flex: 1 0 auto; background: red">
      <div style="display: flex; flex-direction: row; width: 100%; height: 100%; background: gray">
        <div style="height: 100%; flex: 1 0 auto">
          <div style="width: 100%; height: 100%; background: orange">
            boop
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

图片中可以看到正在发生的事情：

有人能想到修复吗？我有一个小框架，使用下面的表格进行布局。我终于在升级它以使用Flexbox的过程中，但我似乎无法让嵌套的flexbox在所有浏览器上正常工作。

编辑：所以如果我添加另一个＆＃34; boop＆＃34; div作为flexbox容器的子代，以下是我想要的（来自firefox和IE）。

如果我将高度设置为100％，那么它会将其他兄弟div的高度拧紧。