height:100% 失效场景

简单示例代码：

<div class="container">
	<div class="top">top</div>
	<div class="mid">
		<video src="video.mp4">
	</div>
	<div class="bottom">bottom</div>
<div>
<style>
	.container{
		width:100px;
		height:500px;Ï
		display:flex;
		flex-direction:column;
	}
	.top{
		flex:0;
		height:10px;
	}
	.mid{
		flex:1
	}
	.video{
		width:100%;
		height:100%;
		object-fit:cover;
	}
	.bottom{
		flex:0;
		height:10px;
	}
</style>

这段代码存在一个问题：视频原本的高度比容器高，则容器内部元素总高度实际会超过500px。

产生这个问题的原因在于，video的height：100%没有生效，直接按原高度展示，最终超过了容器的高度。

修复方法： 在mid元素上，加一个高度

.mid{
	flex:1;
	height:50px;
}

由于设置了flex:1 mid的实际高度，会根据容器剩余空间自由扩展。