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

我不知道，如果你的問題是問你是否可以只用柔性做到這一切。 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; 
}