force element to display outside of overflow:hidden

The overflow:hidden definition will hide anything inside that element that extends beyond its bounds.

Depending on your specific application, you may be able to use a structure like this:

.container {
  position: fixed;
  top: 30px;
  left: 50px;
  height: 30px;
  width: 300px;
  background: red;
}
.outer {
  overflow: hidden;
}
.inner {
  position: absolute;
}
.show-up {
  width: 100px;
  height: 300px;
  background: green;
  position: relative;
  margin-left: 20px;
}

<div class="container">
  <div class="outer">
    <div class="inner"></div>
  </div>
  <div class="show-up">this needs to show up ALL 300 pixels high of it</div>
</div>

View on JSFiddle

Make an additional outer div with position relative and set the absolute position of the div you want to move outside of the overflow hidden div.

.container{
  position:relative;
}
.overflow-hid-div{
  overflow:hidden;
  margin-left:50px;
  width:200px;
  height: 200px;
  background-color:red;
}
.inner{
  width:50px;
  height: 50px;
  background-color:green;
  position: absolute;
  left:25px;
  top:25px;

}

<div class='container'>
    <div class='overflow-hid-div'>
        <div class='inner'>
            sup!
        </div>
    </div>
</div>

https://jsfiddle.net/JerryGoyal/ysgrevoh/1/

I was struggling for ages with this for a tooltip. My containing element is overlay: hidden and add I can't add extra wrapper divs because it causes some weird bug with flexbox and ResizeObserver. As far as I know there is no way for a position: absolute element to escape a parent that is both overlay: hidden and position: relative.

However I discovered that position: fixed elements aren't clipped by overlay: hidden at all, and it's actually easier to use position: fixed in my case. Might be an option for some.