Flex div重叠页脚

Question

我相信我找到了一个我有的错误，但不是100％。我有一个基本的网格设置，有三个主要部分。其中两个部分是：

-light灰色

-white绿色

然后我在这两个部分下都有一个100％宽度的页脚。在我的页脚的左侧（light-gray下面），我显示了一个输入，但它表现得好像有什么东西在它上面。如果我开始输入输入，那么它应该显示。它几乎就像覆盖它的东西，但允许它显示。然后每当我提交该输入时，white-green div都会覆盖正常弹出窗口，即使弹出窗口的z-index更高。

布局如下：

但是，我会把链接放到实际网站上，这样你就可以看到它实际上在做什么......注意页脚左侧的输入......它看起来很暗，但如果你点击它并输入它恢复到原始状态的东西。然后，如果你在其中放入一个随机的电子邮件地址并提交，你会发现弹出窗口被掩盖了。

在将此布局转换为弹性布局之前，这些问题都没有发生。

以下是它的基本代码：

.project-flex-wrap {
    display: flex;
}
.left {
    display: flex;
    flex-direction: column;
    flex: 0 0 33%;
}
.white-green {
    background: rgb(241,250,247);
    flex: 1;
    z-index: 55;
    text-align: center;
}
.light-gray {
    background: #E0E0E0;
    padding-top: 150px;
    flex: 100vh;
}

<div class="project-flex-wrap">
    <div class="left">
        <div class="light-gray"></div>
    </div>
</div>
<div class="white-green">
</div>

Answer 1

我不确定你的问题是否在询问你是否可以只用flex实现这一切。 If that's the case here's a resource.

但是，解决方案是添加分节符和页脚部分，下面列出了代码。

<div class="project-flex-wrap">
   <div class="left">
<div class="light-gray"></div>
</div>
</div>
<div class="white-green">
</div>
<div style="clear:both;"> </div>
<div class="footer"></div>

添加此CSS：

.footer {
    background-color: blue;
    width: 100%;
    height: 100px;
}