Html 使用CSS使flex容器的第二项具有粘性

我有一个包含两列的flex容器

每列也是一个flex容器。 我希望使侧栏的第二个项目具有粘性，因此当您向下滚动时，它将保持可见，直到页面结束

在我的示例中，您可以看到我尝试了

position:sticky

但是看起来这个项目似乎被粘住了，但不是一直到页面的末尾。
我错过了什么

我尝试了一些类似的答案，但没有成功

演示：


.page容器{
显示器：flex；
对正内容：空间均匀；
}
.圆柱容器{
最大宽度：50%；
}
.商品包装{
显示器：flex；
弯曲方向：立柱；
}
.项目{
最小宽度：150px；
利润率：15px；
填充：30px；
背景：红色；
文本对齐：居中；
}
.粘的{
背景：绿色；
职位：-网络工具包粘性；
位置：粘性；
排名：0；
自我校准：灵活启动；
}

项目1
项目2
项目3
项目4
项目5
...
附带项目1
附带项目2
这是因为第二列的内部包装没有延伸到整个高度<代码>粘性

不会让元素通过其容器的限制

尝试添加

高度：100%如下（我用一个类完成）：


.page容器{
显示器：flex；
对正内容：空间均匀；
}
.圆柱容器{
最大宽度：50%；
}
.商品包装{
显示器：flex；
弯曲方向：立柱；
}
.项目{
最小宽度：150px；
利润率：15px；
填充：30px；
背景：红色；
文本对齐：居中；
}
.粘的{
背景：绿色；
职位：-网络工具包粘性；
位置：粘性；
排名：0；
自我校准：灵活启动；
}
.全高{
身高：100%；
}

项目1
项目2
项目3
项目4
项目5
...
附带项目1
附带项目2
Css有时像魔法，有时像肮脏的魔法；）