css - 如何创建一个不会溢出其父容器的覆盖层？

Question

我有 2 列由 2 个容器分隔。

在第一列中我设置了一个元素 <div class="overlay"></div>应该仅覆盖和覆盖第一列。

我在类 overlay 上设置了以下 css 属性.

.overlay {
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: rgba(255,255,255,0.8);
}

但是，它不仅仅涵盖第一列。它还覆盖了其他第二列。

我不想设置固定宽度和固定高度，因为我想覆盖整个容器。如果我修复宽度，我可能很快就会遇到问题。

这是 sample fiddle到目前为止我所拥有的..

Answer 1

尝试添加这个 CSS

.container-1{
    overflow: hidden;
    position: relative;
}

Demo