html - 如何在 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不能有预定义的高度，因为它需要根据它的弹性容器来调整大小，这将在我的用例中改变。谢谢！

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

标签： htmlcssgoogle-chromefirefoxflexbox