CSS:Flex项彼此重叠

我用几个div容器（事件、新闻、采访）创建了一个网站。我想让容器显示在彼此下面。为了实现这一点，我在flag类上使用了

display:flex

和

position:absolute

，但这似乎不起作用

当我从flag中删除

position:absolute

并将其应用于.bar类时，元素会被拉伸

我遗漏了什么来显示具有正确高度的div

正文{
边际：0px；
}
文章
在一边
细节，
figcaption，
图形
页脚，
标题，
hgroup，
主要的，
导航，
第节，
总结{
显示：块；
}
.作者框：：之前，
.clearfix:：之前，
.条目：：之前，
.条目内容：：之前，
.footer小部件：：之前，
.nav primary：：之前，
.nav次要：：之前，
.pagination：：之前，
.site容器：：之前，
.site footer:：之前，
.site header：：之前，
.站点内部：：之前，
.wrap：：之前{
内容：''；
显示：表格；
}
.作者框：：之后，
.clearfix:：之后，
.条目：：之后，
.条目内容：：之后，
.footer小部件：：之后，
.nav primary:：之后，
.导航辅助：：之后，
.pagination：：之后，
.site容器：：之后，
.site footer:：之后，
.site header：：之后，
.站点内部：：之后，
.wrap：：之后{
明确：两者皆有；
内容：''；
显示：表格；
}
身体{
颜色：rgb（51,51,51）；
字体系列：拉托，无衬线；
字号：18px；
字体大小：300；
线高：1.625；
边际：0px；
背景色：rgb（245245245245）；
}
.地盘内，
.包裹{
保证金：0px自动；
最大宽度：1200px；
}
.地盘内部{
明确：两者皆有；
填充顶部：40px；
}
.content侧边栏侧边栏。内容侧边栏换行，
.侧边栏内容侧边栏。内容侧边栏换行，
.侧边栏内容.内容侧边栏换行{
宽度：980px；
}
.内容侧边栏侧边栏.内容侧边栏换行{
浮动：左；
}
.侧边栏内容侧边栏。内容侧边栏换行，
.侧边栏内容.内容侧边栏换行{
浮动：对；
}
.内容{
浮动：对；
宽度：800px；
}
.内容侧边栏.内容，
.content侧边栏侧边栏.content，
.侧边栏内容侧边栏.内容{
浮动：左；
}
.content侧边栏侧边栏.content，
.侧边栏内容侧边栏.内容，
.侧边栏侧边栏内容.内容{
宽度：580px；
}
.全幅内容.内容{
宽度：100%；
}
.特色内容.条目{
边框底宽：2px；
边框底部样式：实心；
边框底色：rgb（245245245245）；
边缘底部：20px；
填充：0px 0px 24px；
}
.footer小部件.entry{
边框底宽：1px；
边框底部样式：虚线；
边框底色：rgb（102102102）；
}
.进入{
边缘底部：40px；
填充：50px 60px；
}
.内容.条目{
背景色：rgb（255、255、255）；
}
.entry头.entry元{
边缘底部：24px；
}
身体{
边际：0px；
背景：rgb（128128128）；
}
.内容.条目{
边界半径：0.3em；
盒影：rgb（79,79,79）5px 5px 40px；
}
输入[type=“search”]{
填充：5px20px；
边框右下半径：50px；
边框左上半径：50px；
边框：1px实心rgb（76,76,76）；
宽度：250px；
背景色：rgb（103、102、102）；
}
.内容{
宽度：680px；
}
.地盘内，
.包裹{
最大宽度：1035px；
填充顶部：0px；
}
.进入{
填充：30px 40px；
}
.分录标题{
利润：-30px-40px；
位置：相对位置；
}
.条目标题.条目标题a{
位置：绝对位置；
颜色：rgb（255、255、255）；
填充：6px40px；
底部：12%；
左：0px；
右：0px；
字号：0.63em；
背景：rgba（0,0,0,0.701961）；
}
.entry头.entry元{
位置：绝对位置；
颜色：rgb（255、255、255）；
填充物：5px；
顶部：9px；
右：0px；
字体大小：0.7em；
字体：斜体；
背景：rgba（0,0,0,0.701961）；
}
.条目标题.条目标题{
左边距：40px；
}
.附件帖子缩略图{
边界半径：0.3em 0.3em 0px 0px；
}
.国旗{
字体大小：0.7em；
字号：700；
填充：3x15px；
颜色：rgb（255、255、255）；
边界半径：0.4em 0px 0px 0.4em；
保证金：10px 0px 0px-10px；
空白：nowrap；
背景色：rgb（255、51、153）；
}
.flag：：之后{
内容：''；
位置：绝对位置；
左：2px；
最高：100%；
边框宽度：4px；
边框样式：实心；
边框颜色：rgb（176,0127）rgb（176,0127）透明；
}
.flag：：之前{
内容：''；
位置：绝对位置；
顶部：0px；
边框宽度：26px 26px 0px 0px；
边框样式：实心；
边框颜色：rgb（255、51、153）透明；
右：-26px；
}
.旗类{
背景色：rgb（0176176）；
}
.酒吧{
显示器：flex；
位置：绝对位置；
}
.条目标题.bar{
宽度：680px；高度：220px；背景：url(http://nintendo-online.de/img/bg-game-header-cover.png); }
.flag类别：：之前{
右：-26px；
边框样式：实心；
边框颜色：rgb（0176176）透明；
}
.flag类别：：之后{
边框宽度：0px 0px 27px 27px；
边框颜色：透明rgb（0176176）；
顶部：0px；
左：-24px；
}
.bd.entry{
垫底：10px；
边界半径：0.5em；
边框样式：实心；
边框颜色：rgb（0197160）；
}
.margt10.flag{
利润率：-33px-53px；
文本转换：小写；
}

事件
新闻
采访

我想这可能就是你想要的。我将

.flag

位置更改为相对，并添加了

弹性方向：列；调整项目：灵活启动到.bar类

我还必须从html中删除样式链接，以便应用这些样式，但我认为有些样式缺失

我发现以下内容非常有用


.flag{
位置：相对位置；
字体大小：.7em；
字号：700；
填充：3x15px；
颜色：#FFF；
背景色：#f39；
边界半径：.4em 0.4em；
玛格