Allow absolutely positioned child to render outside parent with overflow: hidden

Question

How to allow for absolutely positioned element to disobey it's ancestor overflow: hidden and render outside it? The situation is complicated by the fact that there is a position: relative on the element between them in the ancestor hierarchy.

Here's a pen. In this situation how to allow red inner div to render at it's full height (300px), rather than being limited by outermost parent's 150px. I cannot remove overflow: hidden from the element - I'm using it to implement a collapsing panel. I also cannot move position: relative to one of outermost element's parents - it must stay at outer element.

Answer 1

Remove overflow:hidden from the .outermost and create another element inside it with these rules: overflow:hidden; height:100%; width:100%; position:absolute; top:0; left:0; and put everything else inside it and they won't get overflown.

.outermost {
  width: 400px;
  height: 150px;
  background-color: blue;
  position:relative;
}

.outer {
   position: relative;
}

.inner {
  position: absolute;
  left: 100px;
  height: 300px;
  width: 50px;
  background-color: red;
  z-index: 1;
}

.hideOverflow{ /* Put all the content here that's overflowing content you want hidden. And leave content you don't want to hide outside this. */
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  overflow:hidden;
}

<div class="outermost">
    <div class="outer">
        <div class="inner">
        </div>
    </div>
    <div class="hideOverflow">
      <p>Overflowing content inside this element will be hidden.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis imperdiet nisl, sit amet pretium eros rhoncus nec. Vestibulum viverra semper libero, nec commodo felis lobortis vel. Nam eu erat vel neque viverra iaculis. Mauris condimentum consectetur sem vitae semper. Duis bibendum mollis ex, vitae egestas velit. Nam vitae dolor ornare, vestibulum dui et, sollicitudin est. Duis tristique vehicula dolor et condimentum. Maecenas in tristique dolor. Mauris luctus tincidunt sem. Nulla sit amet tincidunt quam. Aenean quis semper enim. Morbi dolor tellus, porta eu feugiat non, pellentesque ac lacus. Nulla facilisi. Mauris suscipit aliquet egestas.</p>
  </div>
</div>