flex容器多区块设置视频背景无法撑满父元素高度如何解决

两个核心CSS规则遗漏导致视频无法正确铺满：

• 绝对定位元素的百分比宽高，只会以最近的开启了非static定位的祖先元素为计算参照。代码中给video设置了position: absolute，但承载视频的flex子div默认是position: static，导致video的100%宽高无法匹配到对应子区块的尺寸，最终要么参照上层根元素尺寸，要么按自身原始分辨率渲染。
• 纵向flex布局的子项默认带有min-height: auto属性，会根据内部内容的最小高度撑开容器，容易和flex:1的均等分配规则冲突；同时绝对定位的video默认没有设置top/left偏移，可能出现位置错位盖住其他内容。

不需要改动HTML结构，仅调整CSS规则即可：

1. 给所有flex子div添加定位、溢出裁剪和最小高度重置规则，让它成为内部绝对定位元素的正确尺寸参照
2. 给video补充定位偏移值，调整z-index放在内容下层
3. 给文字内容设置相对定位和更高的z-index，保证显示在视频上层
4. （可选统一表现）给前两个图片背景区块补充背景尺寸和位置规则，和视频背景的铺满效果保持一致

body {
  margin: 0;
}

#a {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
}

#a div {
  flex: 1;
  /* 新增定位、裁剪、最小高度规则 */
  position: relative;
  overflow: hidden;
  min-height: 0;
}

#a div span{
  /* 新增层级规则保证文字显示在视频上层 */
  position: relative;
  z-index: 1;
  font-size: 50px;
  color: white;
}

#a div video {
  height: 100%;
  width: 100%;
  object-fit: cover;
  position: absolute;
  /* 新增位置、层级规则修正视频显示 */
  top: 0;
  left: 0;
  z-index: 0;
}

#a div:first-of-type {
  background: url(https://img.freepik.com/free-vector/hand-painted-watercolor-pastel-sky-background_23-2148902771.jpg?w=2000);
  /* 补充背景规则统一表现 */
  background-size: cover;
  background-position: center;
}

#a div:nth-of-type(2) {
  background: url(https://img.freepik.com/free-vector/hand-painted-background-violet-orange-colours_23-2148427578.jpg?w=2000);
  /* 补充背景规则统一表现 */
  background-size: cover;
  background-position: center;
}

• 4个纵向排列的flex子区块始终保持均等高度，不会被视频原始尺寸撑高
• 两个视频区块内的视频会自动按比例裁剪，完整覆盖对应区块，和图片背景的显示逻辑完全一致
• 文字内容始终显示在最上层，不会被视频遮挡

内容的提问来源于stack exchange，提问作者Chang Alex