如何让absolute定位遮罩覆盖带滚动的容器全部内容？

我有一个设置了position: relative的容器，其高度受flex布局限制（并非示例代码中的200px），容器宽高由内部内容决定。在内容上方设置了一个absolute定位的遮罩用于部分覆盖内容，但当内容溢出出现滚动条时，.cover元素无法拉伸至匹配内容的完整大小。

尝试过以下方法但均无效：

• 将width和height设为100%
• 设置right和bottom为0
• 设置min-height: 100%且bottom: auto

核心原因 #

绝对定位元素的定位参考是父级定位容器的可视区域尺寸，而非容器内部内容的实际滚动尺寸。原来的.my-container作为滚动容器，它的定位区域被自身的受限高度和初始宽度固定，所以遮罩无法跟随内容的溢出尺寸。

纯CSS解决方案（修改结构） #

把定位上下文从滚动容器转移到内容的直接父容器，让遮罩的参考对象变成内容的实际尺寸：

p {
  width: 2000px; /* 模拟宽内容 */
  height: 300px;
  background: cornflowerblue;
  margin: 0;
}

.my-container {
  overflow: auto;  
  height: 200px; /* 模拟受限空间 */
  border: 1px solid red;
}

.content-wrap {
  position: relative; /* 作为遮罩的定位上下文 */
}

.content-wrap .cover {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.8);
}

.my-container .cover span {
  background: white;
  padding: 1rem;
  margin: 1rem;
}

对应的HTML结构调整：

<div class="my-container">
  <div class="content-wrap">
    <p>超长文本行或超宽图片。</p>
    <div class="cover">
      <span class="cover-content">Hello</span>
    </div>
  </div>
</div>

JS方案（无需修改结构） #

如果无法调整HTML结构，可以通过JS动态获取滚动容器的内容尺寸，同步设置给遮罩：

const container = document.querySelector('.my-container');
const cover = document.querySelector('.cover');

function setCoverSize() {
  cover.style.width = `${container.scrollWidth}px`;
  cover.style.height = `${container.scrollHeight}px`;
}

// 初始化执行
setCoverSize();
// 若内容动态变化，需在变化后重新调用该函数

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