force element to display outside of overflow:hidden

Question

This is probably attempting the impossible, but I would like to display an element outside of an element that is overflow: hidden. I know that makes no sense and things are working as they should, but just wanted to double check to see if there is a way.

Best described with this code:

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

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

View on JSFiddle

Answer 1

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

Answer 2

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/