如何防止视频溢出Angular可调整大小的父容器

使用Angular Split实现的可调整大小容器中嵌入了视频，尝试添加随视频自适应的覆盖层，但视频总是溢出父容器，导致覆盖层位置失效。需求是让视频自适应父容器最大宽高，无溢出且同步缩放，覆盖层位置准确对应视频区域。

核心修改思路 #

问题根源在于视频容器的定位和布局约束失效，导致视频尺寸脱离父容器控制。通过调整CSS布局，让视频容器正确继承父容器的尺寸限制，同时作为覆盖层的定位基准。

修改后的SCSS代码 #

.video-wrapper {
  flex: 1 1 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 4px;
  min-height: 0; // 修复flex容器下子元素无法收缩的问题
  min-width: 0;

  .video {
    position: relative; // 作为覆盖层的定位父级
    max-width: 100%;
    max-height: 100%;
    display: inline-block; // 容器尺寸自适应视频内容

    .video-element {
      width: 100%;
      height: auto; // 保持视频宽高比，自适应容器
      display: block; // 移除默认行内元素间隙
    }

    .overlay {
      font-size: 20px;
      z-index: 1;
      position: absolute;
      border: 2px solid;
    }
  }
}

修改说明 #

• .video-wrapper：改用flex布局实现内容居中，添加min-height:0和min-width:0解决flex容器中子元素溢出父容器的问题（Angular Split的容器为flex布局，默认子元素不会主动收缩）。
• .video：移除position:absolute，改为relative作为覆盖层的定位基准；使用inline-block让容器尺寸跟随视频的自适应大小，同时通过max-width和max-height限制不超出父容器范围。
• .video-element：设置width:100%和height:auto，确保视频按原始宽高比缩放，填满容器且无溢出。

效果验证 #

修改后，视频会自动适配Angular Split容器的大小，容器缩小时视频同步按比例缩小；覆盖层基于.video容器定位，其百分比样式会准确对应视频区域，不会出现错位。

组件TS代码和HTML代码无需修改，原有的覆盖层百分比计算逻辑保持有效。

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