Html 将一个div放置到带填充的flexbox底部

我有点像：

.flex容器{
显示器：flex；
证明内容：中心；
填充：5%；
位置：相对位置；
}
.box1{
位置：绝对位置；
底部：0；
宽度：100%；
身高：100%；
}

---

现在还不清楚您到底想实现什么，但如果我做对了，这应该是一个解决方案

.flex容器{
显示器：flex；
证明内容：中心；
填充：5%；
位置：相对位置；
边框：3倍纯黑；
}
div{
文本对齐：居中；//不需要
}
.box1{
位置：绝对位置；
底部：0；
宽度：100%；
身高：20%；
边框：1px纯绿色；
}
.box2{
边框：1px纯红；
高度：20px；
宽度：自动；
填充物：5px；
}

框1
框2

这看起来可能是一个错误。与其问我们您的解决方案（“我如何使用flexbox使其工作？”），不如问我们问题（“我如何制作类似于此的东西…”）。虽然解决方案可能涉及flexbox，但它并不总是答案，您可以打开自己的大门，找到更好的答案。可能的指导：并排，但方框1齐平到底部，方框2居中