flexbox html5视频填充剩余空间

我尝试用一个html5视频来填充flexbox div中的剩余空间

但是，它会溢出，而不是执行我想要的操作：

.wrapper{
填充：10px；
显示器：flex；
弯曲方向：立柱；
最大高度：300px；
背景颜色：绿色；
}
.内容{
宽度：100%；
背景色：红色；
}
录像带{
宽度：100%；
身高：100%；
}
.页脚{
宽度：100%；
背景颜色：橙色；
}

页脚

在

.wrapper

元素中有一个视频和一个页脚。视频上的

高度：100%

可能工作，也可能不工作，具体取决于浏览器（更多详细信息如下）

由于没有在保存视频的

.content

元素上定义高度，因此结果不可预测且不可靠。同样，浏览器行为各不相同

以下是一种跨浏览器更高效、更可靠的方法：

.wrapper{
填充：10px；
显示器：flex；
弯曲方向：立柱；
最大高度：300px；
背景颜色：绿色；
}
.内容{
显示：flex；/*新*/
宽度：100%；
背景色：红色；
}
录像带{
宽度：100%；
/*高度：100%；谢谢。它对于标准视频标签非常有效。不幸的是，它与video.js-->