位置粘性不起作用

Question

我试图在向下滚动网页时粘贴一段文字，但它似乎不起作用。我给它这个CSS：

.left {
    position: sticky; /* doesnt work :( */
    top: 0px;
}

这是完整的代码：http://jsfiddle.net/YYPKM/3281/

这个 div 位于包装器的左侧，但我希望右侧滚动，左侧粘在 div 的顶部。我尝试过很多事情，比如固定位置，但这似乎是最好的选择，我只是无法让位置粘在工作上。

有谁知道我做错了什么？

Answer 1

我认为使用display: table并不能真正解决问题。

您需要做的只是添加将align-self: flex-start;flexbox 元素的高度设置为auto。

.left {
  position: sticky;
  top: 0;
  align-self: flex-start;
}