Html 使用flexbox创建滑动面板

我正在尝试使用flexbox从该网站重新创建一个滑动面板。我似乎无法绝对定位地创建幻灯片整个布局消失了我不确定是什么原因造成的

以下是我迄今为止所做的工作：

.wrapper{
显示：-webkit flex；
显示：-moz flex；
显示：-ms flex；
显示：-o-flex；
显示器：flex；
溢出：隐藏；
宽度：80%；
保证金：0自动；
柔性包装：包装；
对齐项目：拉伸；
位置：相对位置；
}
#滑块{
宽度：100%；
身高：100%；
位置：绝对位置；
}
.幻灯片{
显示：内联块；
宽度：30%；
弹性：1；
边框：实心1pxRGBA（255,255,255,0.8）；
背景颜色：浅蓝色；
利润率：10px；
位置：绝对位置；
}
氢{
字号：3em；
字体系列：草书；
文本对齐：居中；
}

幻灯片1
幻灯片1
幻灯片1
幻灯片2
幻灯片2
幻灯片2

位置为绝对的元素将从文档流中删除。这意味着它们不会占用任何空间。因此，容器内部没有“任何东西”，完全塌陷

要补偿此行为，请尝试指定容器的高度

例如，将以下内容添加到代码中：

.wrapper { height: 80vh; }

修订守则：

.wrapper{
显示器：flex；
溢出：隐藏；
宽度：80%；
保证金：0自动；
柔性包装：包装；
对齐项目：拉伸；
位置：相对位置；
高度：80vh；
}
#滑块{
宽度：100%；
身高：100%；
位置：绝对位置；
}
.幻灯片{
显示：内联块；
宽度：30%；
弹性：1；
边框：实心1pxRGBA（255,255,255,0.8）；
背景颜色：浅蓝色；
利润率：10px；
位置：绝对位置；
}
氢{
字号：3em；
字体系列：草书；
文本对齐：居中；
}

幻灯片1
幻灯片1
幻灯片1
幻灯片2
幻灯片2
幻灯片2

这整个问题+答案是堆栈片段的完美案例：