Html 用较宽的元素中断右浮动边缘列

我试图创建一个站点布局，其中包含一个主要内容区域，右边是一个边缘列。在主要内容下面可能会有更多的元素，通常与主要内容的宽度相同。但现在应该可以在这个区域创建更广泛的元素，边缘列应该会自动回流

简而言之，我想要达到的是

body，
html{
身高：100%；
边际：0px；
填充：0px；
}
分区内容区{
外形：3倍纯黑；
利润率：6px；
填充物：5px；
}
#主要{
宽度：200px；
浮动：无；
最小高度：250px；
显示：内联块；
}
边缘分区{
高度：100px；
宽度：250px；
浮动：对；
背景色：#f1f1；
明确：两者皆有；
}
div.content-module{
宽度：200px；
高度：100px；
浮动：无；
显示：内联块；
}
div.content-module.wide{
宽度：400px；
}

应该是这样的
边缘模块
边缘模块
边缘模块
主要区域
内容
内容广泛
边缘模块
另一内容

据我所知，除了可能的CSS网格之外，没有任何CSS布局方法可以实现这一点，即使在那时，我也很怀疑。我会考虑另一种布局方法或javascript。反射式CSS区域可能会工作，但它们几乎不支持。