Div扩展到另一个div后面

Question

（以前的问题已修复更新到新问题） mainContent div现在扩展到我在它与页脚之间的轮播div。

CSS Style1：

body {
    height:100%;
    display: flex;
    flex-direction: column;
    height: 100%;
    color: #000305;
    line-height: 1.429;
    margin: 0;
    padding: 0;
    text-align: left;
}
.mainContent {
    height:100%;
    flex: 1;
    position: relative;
    background-color: #333;
    overflow: hidden;
    line-height: 25px;
}
.mainFooter {
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
    height: 150px;
    width: 100%;
    float: left;
    padding-left: 0;
    background-color: #000;
    color: #CCC;
}

CSS样式2：

.list_carousel {
    background-color: #222;
}

旋转木马有更多的CSS类和ID，但这是唯一一个编辑div的人，所以你可以看到它没有高度或位置的设置。当我确定将位置设置为固定时，它会在页脚下方拍摄，并且没有滚轮。

所以现在mainContent div在浏览器上扩展到底部，div中的一些东西现在隐藏在mainContent下面的div之后，比如轮播，甚至在页脚后面。

Answer 1

尝试下面的css，可能是你需要看到Fiddle Demo

CSS：

{{1}}