1

Of course I realize that this question has been asked, and I'd thought I had the solution with this: https://stackoverflow.com/a/15971409/295133

But that answer only allows content overflow at the bottom, not at the top.

See this example (http://jsfiddle.net/7y2cb/251/):

.wrapper{
  width: 400px;
  height: 200px;
  border: 2px solid red;
  position:relative;
  top:200px;
}
.inner{
  max-width: 100%;
  overflow-x: hidden;
  border:1px blue solid;
}
.example{
  width:600px;
  height:500px;
  background:green;
  position:relative;
  left:100px;
  top:-200px;
}
<div class="wrapper">
  <div class="inner">
    <div class="example"></div>
  </div>
</div>

I'm wondering there are any workarounds because it affects my site when viewed on an iPad and its scaling.

Community
  • 1
  • 1
Adam
  • 8,849
  • 16
  • 67
  • 131
  • I want that green box to be seen and not cut off at the top. – Adam Mar 24 '16 at 02:52
  • @Boltclock Actually that is an interesting behaviour. I don't see why setting `overflow-x: hidden;` prevents overflowing at the top as well. Very strange. Does someone have an explanation for this? – connexo Mar 24 '16 at 07:54

0 Answers0