Html 我如何让flexbox有一个中心固定和底部固定的孩子在一起？

我试图通过flexbox获得以下类型的布局

|                      |
|                      |
| CENTER FIXED ELEMENT |
|                      |
| BOTTOM FIXED ELEMENT |

这是我粗略的flexbox CSS

.wrapper{
    display:flex;
    justify-content:center;
    flex-direction:column;
}
.bottom-element {
    align-self:flex-end;
}

背后的想法是，

wrapper

中的任何内容都会对齐中心，

。底部元素

会将自身对齐到框的底部

但是，这并没有像预期的那样起作用，底部元素正好出现在中心元素之后

还有其他办法解决这个问题吗？或者是我可能错过的愚蠢的事情？

更新1: 将整个“包装”的“中间”部分垂直居中

.wrapper{
高度：100px；
宽度：100px；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
位置：相对位置；
边框：1px纯红；
}
中间的
.底部{
背景：水；
}
.底部{
位置：绝对位置；
底部：0；
左：0；
右：0；
}

中间的
底部

.container{
显示器：flex；
弯曲方向：立柱；
背景色：红色；
高度：10公分；
}
.第三{
页边顶部：自动；
}
.首先{
页边顶部：自动；
}

弗斯特
第二
第三