如何对齐 flex 容器底部的内容 w/o 绝对？

Question

所以我基本上有 2 个宽度相同的容器，但可以有不同的 "heights"，具体取决于它们的内容。我希望两者都具有相同的高度，采用最高的高度，所以我使用了一个完美的 flexbox。

现在的问题是我想知道是否可以对齐它们底部的内容。

我基本上有：

<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），并且它们的高度相同。但我希望能够对齐底部的按钮。

我尝试了很多方法都行不通，比如在里面做了一个 table div，但是我无法将高度拉伸到 100%行 divs

我也不能对按钮使用 position:absolute，因为它们会在从高度计算中取出时与文本重叠。

我什至尝试在每个容器中制作一个垂直对齐的弹性容器，但这也不会拉伸到 100% 高度

Answer 1

您可以通过绝对定位实现您想要的效果，而不会与文本重叠。你可以为按钮设置一个固定的高度，比方说 50px。然后，您必须将 padding-bottom 应用于等于按钮高度 + 顶部和底部边距的框。因此，如果您希望按钮距离框底部 20px，您可以向框添加 90px (50 + 20 + 20) padding-bottom。如果你能把代码提交到jsfiddle，帮助就容易多了。

如何对齐 flex 容器底部的内容 w/o 绝对？

How do I align content at the bottom of a flex container w/o absolute?

html

css

flexbox