Chrome上的flex元素上的位置粘滞失败

Question

我正在尝试使用此库将flex元素设置为position: sticky：

https://github.com/soenkekluth/sticky-state

我有一个非常简单的布局，里面有一个flex容器和两列。我希望正确的列是粘性的。

这是html：

<div class="container">
  <div class="left">bla</div>
  <div class="right sticky">sticky</div>
</div>

和css：

.container {
  display: flex;
  padding: 5%;
}

.left {
  background: green;
  flex: 2;
  height: 3000px;
  margin-right: 3em;
  width: 80%;
}

.right {
  border: 1px solid red;
  height: 100%;
  flex: 1;  
  top: 5em;
  width: 400px;
}

这是一支说明整件事的笔：http://codepen.io/anon/pen/LZVbPQ

在Firefox和Safari上它按预期工作，或者至少在我希望它工作的时候。在Chrome上它没有。知道为什么吗？