0

I need to hide the overflow of the y axis but not the x axis. The reason for this is I have a box-shadow and I want this shadow to be visible outside of its container (as is the default behaviour), but I also have an absolutely positioned element which I want to be hidden.

I assumed I could do this by setting div.outer to overflow-x: visible; overflow-y: hidden; however setting either x or y axis to overflow hidden seems to hide all of the overflow.

.outer {
  background: grey;
  margin-left: 100px;
  margin-top: 100px;
  padding-top: 40px;
  padding-bottom: 40px;
  position: relative;
}
.inner {
  height: 20px;
  width: 20px;
  background: blue;
  box-shadow: 0 0 10px 20px red;
}
.hide {
  position: absolute;
  top: -30px;
}
<div class="outer">
  <div class="inner">
  </div>
  <div class="hide">
    Hide me
  </div>
</div>

http://codepen.io/anon/pen/rrmQmB

enter image description here

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
Evanss
  • 23,390
  • 94
  • 282
  • 505
  • [As you can not combine `overflow-x: visible; overflow-y:hidden;`](http://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue) you will need to set the overflow to another helper container which contains `.hide` but not `.inner`. – Nico O Sep 27 '16 at 09:55
  • 1
    These two images are exactly the same... – Slava Fomin II Jun 04 '19 at 16:30

0 Answers0