0

Can someone explain to me why browsers render a scrollbar for an "overflow-y: visible" element if it's inside a fixed position parent? Note that this only happens if the parent has "overflow-x: hidden". If overflow-x is not set to hidden, overflow-y: visible causes no scrollbar to appear, which is expected behavior.

Below is a jsfiddle example in which I expect both left and right divs to render the same, but they don't. Is there any way to get the left box render like the right one without setting a height on wrapper div and removing overflow-x hidden from the wrapper?

http://jsfiddle.net/A2gJ4/2/

CSS and HTML:

.wrapper {
  position: fixed;
  border: solid 1px #ccc;
  width: 250px;
  height: auto;
  top: 10px;
  overflow-x: hidden;
}

.wrapper p.absolute {
  position: absolute;
}

.wrapper.first {
  overflow-y: visible;  
  left: 10px;
}

.wrapper.second {
  overflow: visible;
  left: 280px;
}
<div class="wrapper first">
  <p>Content that is not positioned</p>
  <p class="absolute">Content is absolute positioned</p>
</div>

<div class="wrapper second">
  <p>Content that is not positioned</p>
  <p class="absolute">Content is absolute positioned</p>
</div>
captainsac
  • 2,484
  • 3
  • 27
  • 48
smohadjer
  • 801
  • 1
  • 9
  • 24
  • In this case the child is not fixed position. Here the different behavior between first and second div is caused by "overflow-x: hidden". If I remove it from wrapper div, both examples render alike. – smohadjer Aug 05 '14 at 13:24
  • And http://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue – j08691 Aug 05 '14 at 13:39

0 Answers0