如何對齊Flex容器底部沒有絕對的內容？

所以，我基本上有2個容器是相同的寬度，但根據其內容可以有不同的「高度」。無論採用哪種高度最高，我都希望兩者都具有相同的高度，所以我使用了可以完美工作的柔性盒。如何對齊Flex容器底部沒有絕對的內容？

現在的事情是我想知道是否有可能對齊他們兩個底部的內容。

我主要有：

<div class="flex-box"> 
    <div class="row event">MetTalks...</div> 
    <div class="row shop">Digital Shop...</div> 
</div> 

.flex-box { 
    display: flex; 
    width: 66%; 
    flex-direction: row; 
    justify-content: flex-start; 
    padding: 30px; 
} 

.row { 
    flex: 1; 
}

正如你可以看到here，他們同樣採取了行（我只希望他們跨越第一個2/3）像我想，他們的高度是相同。但我希望能夠對齊底部的按鈕。

我已經嘗試了一堆不能工作，比如做一個表裏面的div的東西，但我不能得到高度伸展到該行的div的100％

我也可以不使用位置：按鈕的絕對位置，因爲它們在高度計算中被取出時重疊文本。

我甚至試圖使每一個內部垂直對齊的柔性容器，但也沒有延伸到100％的高度

來源

2015-03-31 Programmer Unextraordinair

你可以達到你想要絕對定位是什麼，沒有文字重疊。你可以爲按鈕設置一個固定的高度，比如說50px。然後，您必須將填充底部應用於等於按鈕高度的框，並將底部邊距加上頂部&。所以，如果你想讓按鈕位於盒子底部20px的位置，你可以在盒子上增加一個90px（50 + 20 + 20）的底部填充。如果您可以將代碼提交給jsfiddle，則幫助起來會更容易。

來源

2015-03-31 19:28:52

所以這可以很好地保持按鈕在底部而不會與文本重疊，但由於絕對定位，當按鈕的寬度足夠收縮時，按鈕的寬度超過父（行）容器的填充極限。 – 2015-03-31 19:50:21

實際上，設置寬度到一定比例似乎工作出於某種原因。我認爲絕對定位會打破這一點，但顯然它不會！ – 2015-03-31 20:44:56

如何對齊Flex容器底部沒有絕對的內容？

回答

相關問題