如何在Chrome中有100％高的嵌套式Flex容器？

Question

.page {
  width: 200px;
  height: 400px;
}

.outer {
  background: #f99;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.item {
  flex-grow: 1;
  border: 2px solid #099
}

.innerFlex {
  display: flex;
  flex-direction: column;
 // height: 100%;
  background: #a9a;
}

<div class="page">
  <div class="outer">
    <div class="item">
      <div class="innerFlex">
        <div class="item">A</div>
        <div class="item">B</div>
      </div>
    </div>
    <div class="item">
      sdds
    </div>
  </div>
</div>

在Firefox 63上，它按我期望的方式显示，.innerFlex填充其父元素高度的100％：

但是，在Chrome 70上，它不遵守height: 100%规则，正如我期望的那样：

为什么会这样，我该如何解决？ .item不能具有预定义的高度，因为它需要根据其flex容器的大小进行调整，这在我的用例中会有所变化。谢谢！

注意：最初被标记为重复项的问题并不相同。第一个没有解决flexbox，第二个没有解决Chrome和FF之间的行为差​​异。