Css 半屏幕固定部分，半滚动至内容。然后反转截面

好的，我正在尝试创建一个拆分屏幕布局（如果可能的话，使用flexbox），其中一个容器固定在屏幕的左半部分，而另一半屏幕上保存文章内容的容器会滚动。当内容结束时，整个部分应自由滚动到下一部分，这将与第一部分相反（固定在右边，滚动内容在左边。在我到达页脚之前，将有四个部分倒置。这个JSFIDLE几乎就是我要找的，我只需要知道如何倒置并添加下一个部分，以便它们按照说明流动

这是每个部分的大致布局

#集装箱干管{
背景：谭；
显示器：flex；
宽度：100vw；
高度：100vh；
调整内容：灵活启动；
}
#集装箱灰色{
背景：灰色；
显示器：flex；
弯曲方向：行；
身高：100%；
宽度：50%；
证明内容：中心；
}
#集装箱黑{
背景：黑色；
显示器：flex；
弯曲方向：立柱；
身高：100%；
宽度：50%；
证明内容：柔性端；
}
#你好{
背景：蓝色；
弹性：5；
自对准：居中；
}
#集装箱导航{
背景：白色；
显示器：flex；
弯曲方向：行；
证明内容：周围的空间；
}
#怎么{
背景：橙色；
}
#是{
背景：紫色；
}
#你{
背景：粉红色；
}
#容器内容{
背景颜色：米色；
显示器：flex；
弯曲方向：立柱；
身高：100%；
宽度：50%；
调整内容：灵活启动；
}
.标题{
宽度：49%；
自对准：居中；
弹性：1；
}
.文章{
宽度：85%；
自对准：居中；
}

你好
如何


您
第一标题
同侧阴阳，是一位杰出的献祭者。同侧阴阳，是一位杰出的献祭者。同侧阴阳，是一位智慧的献祭者，是一位伟大的献祭者
无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。
第二标题
同侧阴阳，是一位杰出的献祭者。同侧阴阳，是一位杰出的献祭者。同侧阴阳，是一位智慧的献祭者，是一位伟大的献祭者
无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。
第三标题
同侧阴阳，是一位杰出的献祭者。同侧阴阳，是一位杰出的献祭者。同侧阴阳，是一位智慧的献祭者，是一位伟大的献祭者
无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。
第四标题
同侧阴阳，是一位杰出的献祭者。同侧阴阳，是一位杰出的献祭者。同侧阴阳，是一位智慧的献祭者，是一位伟大的献祭者
无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。无。

您应该能够将

#溢出：隐藏
添加到
container main
，并将
溢出：滚动
到
#container content
，以实现右部分滚动的目标，而左部分保持静止，直到两者都结束。
您应该能够添加
#溢出：隐藏
 到
容器主部分
和
溢出：滚动到
#容器内容
以实现右部分滚动的目标，而左部分保持静止，直到到达这两个部分的末尾。
您可以将一组
flex
行作为主要部分，为该部分添加
溢出-y:scroll
要滚动，请将侧边栏设置为
位置：sticky
，以便即使鼠标在内容区域上也能滚动整个部分，然后将内容区域和侧边栏设置为
flex grow:1
（简称
flex:1 0
）以50/50的宽度将它们分开。然后绝对地在内容中放置一个元素，以便主部分与边栏的高度匹配

然后，要反转侧边栏/内容所在的一侧，可以使用flex
order
属性使用
：nth-child（）


*{框大小：边框框；}
部分{
最大宽度：640px；
溢出y：滚动；
保证金：自动；
边框：1px实心#999；
显示器：flex；
背景：#333；
}
截面：第n个子（偶数）主{
顺序：-1；
}
别说了，梅因{
弹性：1050%；
}
放在一边，里面{
填充：.5em；
}
旁白{
背景：#eee；
位置：粘性；
顶部：0；左侧：0；
}
主要{
位置：相对位置；
颜色：白色；
}
.内部{
位置：绝对位置；
顶部：0；左侧：0；右侧：0；底部：0；
}

旁白
旁白
旁白
旁白
旁白
旁白
旁白
旁白
旁白
旁白
旁白
旁白
旁白
旁白

main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main