Html 层叠flexbox未将内容放置在第一个框之后

我对层叠flexbox有问题。我有：

• 一列flexbox，首先放置我的内容，然后放置我的页脚，页脚之间留有空格（因此页脚位于页面底部）
• 内容为flexbox行，左侧放置菜单，右侧放置有效负载

在我下面的示例中，它在没有滚动条的“情形1”中运行良好。内容位于页面/容器的底部。在情况2中，页脚被放置在视图的底部（基于初始滚动）和内容的上方，并且在我滚动时保持在小位置。我的目标是让它只出现在内容之后。我在不同的配置中使用了最小高度、高度和最大高度，但当我更改它们时，我似乎用另一个问题替换了一个问题

#内容1{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：50%；
溢出：自动；
}
#内容2{
位置：绝对位置；
排名：0；
底部：0；
左：50%；
右：0；
溢出：自动；
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
最小高度：100%；
身高：0；
}
梅因先生{
显示器：flex；
}

菜单
情景1
页脚1
菜单
情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2


页脚2

#内容1{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：50%；
溢出：自动；
}
#内容2{
位置：绝对位置；
排名：0；
底部：0；
左：50%；
右：0；
溢出：自动；
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
/*证明内容：之间的空间*/
最小高度：100%；
}
梅因先生{
显示器：flex；
}
.footer{margin top:auto；}/*新建*/

菜单
情景1
页脚1
菜单
情景2

情况2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2

情景2


页脚2

为什么在

容器上有
高度：0
？当您删除该选项时，布局似乎正常。如果没有高度：0，情况2的问题就解决了，但现在情况1有一个滚动条，这不是必需的，因为您只需要对第二个容器应用调整。试试这个：
#content2>.container{height:auto}
。不幸的是，内容将是动态的，因此我需要在两种情况下使用相同的样式表，而不是使用
auto
边距。