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 an

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;
}

  

    

  
  
this needs to show up ALL 300 pixels high of it

View on JSFiddle