Html 如何将flex容器底部的内容与绝对值对齐？

所以我基本上有两个相同宽度的容器，但是根据它们的内容不同，它们的“高度”也不同。我希望两者都有相同的高度，采用最高的高度，所以我使用了一个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;
}

MetTalks。。。
数码商店。。。
.软盒{
显示器：flex；
宽度：66%；
弯曲方向：行；
调整内容：灵活启动；
填充：30px；
}
.行{
弹性：1；
}

正如你所看到的，它们像我想的一样占据了这一排（我只想让它们跨越前2/3），它们的高度是一样的。但我希望能够对齐底部的按钮

我尝试过很多不起作用的事情，比如在里面做一个表div，但是我无法将高度拉伸到行div的100%

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

---

我甚至试着在每个容器内制作一个垂直对齐的flex容器，但这也不能延伸到100%的高度

通过绝对定位，您可以实现您想要的，而不会重叠文本。你可以给按钮设置一个固定的高度，比如说50px。然后，您必须将填充底部应用到框中，该框等于按钮的高度+顶部和底部边距。所以，如果你想把按钮定位在离盒子底部20px的位置，你可以在盒子底部添加一个90px（50+20+20）的填充物。如果您可以将代码提交给JSFIDLE，那么会更容易提供帮助。

因此，这非常适合将按钮保持在底部，而不会与文本重叠，但由于绝对定位，当按钮缩小时，其宽度会超出父（行）容器的填充限制，出于某种原因，将宽度设置为百分比似乎有效。我以为绝对定位会打破这一点，但显然不会！