Flex div overlapping footer - html

Question

I believe I have located a bug I have, but am not 100%. I have a basic grid setup with three main sections. Two of those sections are:
-light-gray
-white-green
I then have a 100% width footer under both of those two sections. On the left side of my footer (underneath light-gray) an input I have, shows up, but it acts as if something is over-top of it. If I start inputting in the input, then it appears as it should. It is almost like something is covering it, but allowing it to be shown. Then whenever I submit that input, the normal pop-up I have gets covered by the white-green div, even though the popup has a higher z-index.
The layout looks like this:
However, I will put the link to the live site, so you can see what this is actually doing...note the input in the left hand side of the footer...it looks dark, but if you click in it and type something it goes back to its original state. Then if you put a random email address in it, and submit, you will notice the pop-up gets covered up.
None of these issues occurred until I turned this layout into a flex layout.
Here is the base code for it:
.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

I'm not sure if your question is asking if you can accomplish this all with only flex.
If that's the case here's a resource.
However, a solution would be adding a section break and a footer section, listed code below.
<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>
Add this CSS:
.footer {
background-color: blue;
width: 100%;
height: 100px;
}