Javascript 沿着页面滚动Div，在其底部停止（如Twitter）

我被困在某个地方。我想做一个三栏的页面布局。中间部分是帖子，右边部分是其他链接和参考，所以（有点长）。左边是固定的

我的问题是,； 当右div到达底部时，如何阻止其移动？如果中间分区的内容较短，那么右边分区的页面也会有一个滚动条，就像Twitter一样

我试着做一些头脑风暴。我想也许Twitter会为这些部分制作双div。一个是正常的，另一个是固定的底部它。所以正常的一个会拉伸页面进行滚动，而另一个会粘在页面上方。但我不确定我是否正确

或者，纯CSS是否有可能？（我还使用了TailwindCSS）

无论如何；以下是我的想法。（或者你可以简单地查看twitter主页提要）

这里还有一个gif

---

您可以在需要停止的元素中使用以下CSS代码

位置：粘性；
底部：0

有关更多信息，请参阅下面有关Stackoverflow的帖子

希望这能回答你的问题

编辑：[尝试一下]

.main{
宽度：100%；
高度：1000px；
显示器：flex；
}
.首先{
宽度：30%；
背景色：红色；
}
.第二{
宽度：40%；
背景颜色：绿色；
}
.第三{
宽度：30%；
背景颜色：蓝色；
高度：500px；
位置：粘性；
顶部：0px；
}
p{
左边距：20px；
}

左内容。


主要内容。


正确的内容。

我应该为sticky创建另一个div吗？因为我使用flexbox进行布局。就像这样：这不是我想要的。有了这个，你应该滚动到页面的末尾，看到第三部分的底部。我想要这样的东西：