将某些祖先设置为不剪辑元素

Question

给出这个例子：

<div class="main">
<div class="container">
  <div id="banner-message">
    <p>I want to be hidden</p>
    <p id="el">I want to be visible</p>
  </div>
</div>
</div>

.main和.container有position:relative，#banner-message和#el有position: absolute，因为我需要在里面移动它们.container overflow: hidden，#el目的是隐藏所有溢出的元素，#el除外，这是我的问题：

鉴于此结构和定位，当.container溢出时，只有next可见？

这是一个背叛的小提琴： https://jsfiddle.net/k5w6stuL/