CSS overflow-x visible and overflow-y hidden causing scrollbar issue

Question

Suppose you have some style and the markup    x000D   x000D  ul x000D    x000D    white-space  nowrap  x000D    overflow-x  visible  x000D    overflow-y  hidden  x000D     added width so it would work in the snippet    x000D    width  100px   x000D    x000D  li x000D    x000D    display  inline-block  x000D    x000D   lt div gt  x000D     lt ul gt  x000D       lt li gt 1 lt  li gt   lt li gt 2 lt  li gt   lt li gt 3 lt  li gt  x000D       lt li gt 4 lt  li gt   lt li gt 5 lt  li gt   lt li gt 6 lt  li gt  x000D       lt li gt 7 lt  li gt   lt li gt 8 lt  li gt   lt li gt 9 lt  li gt  x000D       lt li gt 1 lt  li gt   lt li gt 2 lt  li gt   lt li gt 3 lt  li gt  x000D       lt li gt 4 lt  li gt   lt li gt 5 lt  li gt   lt li gt 6 lt  li gt  x000D       lt li gt 7 lt  li gt   lt li gt 8 lt  li gt   lt li gt 9 lt  li gt  x000D       lt li gt 1 lt  li gt   lt li gt 2 lt  li gt   lt li gt 3 lt  li gt  x000D       lt li gt 4 lt  li gt   lt li gt 5 lt  li gt   lt li gt 6 lt  li gt  x000D       lt li gt 7 lt  li gt   lt li gt 8 lt  li gt   lt li gt 9 lt  li gt  x000D     lt  ul gt  x000D   lt  div gt  x000D   x000D   x000D    When you view this  The  lt ul gt  has a scroll bar at the bottom even though I ve specified visible and hidden values for overflow x y    observed on Chrome 11 and opera       I m guessing there must be some w3c spec or something telling this to happen but for the life of me I can t work out why    JSFiddle  UPDATE - I found a way to acheive the same result by adding another element wrapped around the ul  Check it out

User · Answer

I ve run into this issue when trying to build a fixed positioned sidebar with both vertically scrollable content and nested absolute positioned children to be displayed outside sidebar boundaries   My approach consisted of separately apply    an overflow  visible property to the sidebar element an overflow-y  auto property to sidebar inner wrapper   Please check the example below or an online codepen    x000D   x000D  html   x000D    min-height  100   x000D    x000D  body   x000D    min-height  100   x000D    background  linear-gradient to bottom  white  DarkGray 80    x000D    margin  0  x000D    padding  0  x000D    x000D   x000D   sidebar   x000D    position  fixed  x000D    top  0  x000D    right  0  x000D    height  100   x000D    width  200px  x000D    overflow  visible      Just apply overflow-x    x000D    background-color  DarkOrange  x000D    x000D   x000D   sidebarWrapper   x000D    padding  10px  x000D    overflow-y  auto       Just apply overflow-y    x000D    height  100   x000D    width  100   x000D    x000D   x000D   element   x000D    position  absolute  x000D    top  0  x000D    right  100   x000D    background-color  CornflowerBlue  x000D    padding  10px  x000D    width  200px  x000D    x000D   lt p gt Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium  totam rem aperiam  eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo  Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit  sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt  Neque porro quisquam est  qui dolorem ipsum quia dolor sit amet  consectetur  adipisci velit  sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem  Ut enim ad minima veniam  quis nostrum exercitationem ullam corporis suscipit laboriosam  nisi ut aliquid ex ea commodi consequatur  Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur  vel illum qui dolorem eum fugiat quo voluptas nulla pariatur  lt  p gt  x000D   lt div class  sidebar  gt  x000D     lt div class  sidebarWrapper  gt  x000D       lt div class  element  gt  x000D        I m a sidebar child element but I m able to horizontally overflow its boundaries  x000D       lt  div gt  x000D       lt p gt This is a 200px width container with optional vertical scroll  lt  p gt  x000D       lt p gt Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium  totam rem aperiam  eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo  Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit  sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt  Neque porro quisquam est  qui dolorem ipsum quia dolor sit amet  consectetur  adipisci velit  sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem  Ut enim ad minima veniam  quis nostrum exercitationem ullam corporis suscipit laboriosam  nisi ut aliquid ex ea commodi consequatur  Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur  vel illum qui dolorem eum fugiat quo voluptas nulla pariatur  lt  p gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

There is now a new way of addressing this issue - if you remove position  relative from the container which needs to have the overflow-y visible  you can have overflow-y visible and overflow-x hidden  and vice versa  have overflow-x visible and overflow-y hidden  just make sure the container with the visible property is not relatively positioned    See this post from CSS Tricks for more details - it worked for me  https   css-tricks com popping-hidden-overflow

User · Answer

another cheap hack  which seems to do the trick   style  padding-bottom  250px  margin-bottom  -250px   on the element where the vertical overflow is getting cutoff  with 250 representing as many pixels as you need for your dropdown  etc

User · Answer

After some serious searching it seems i ve found the answer to my question   from  http   www brunildo org test Overflowxy2 html     In Gecko  Safari  Opera     visible      becomes    auto    also when combined with      hidden     in other words     visible      becomes    auto    when combined with   anything else different from      visible      Gecko 1 8  Safari 3  Opera   9 5 are pretty consistent among them    also the W3C spec says      The computed values of    overflow-x      and    overflow-y    are the same as their   specified values  except that some   combinations with    visible    are not   possible  if one is specified as      visible    and the other is    scroll    or      auto     then    visible    is set to      auto     The computed value of      overflow    is equal to the computed   value of    overflow-x    if    overflow-y      is the same  otherwise it is the pair   of computed values of    overflow-x    and      overflow-y       Short Version   If you are using visible for either overflow-x or overflow-y and something other than visible for the other  the visible value is interpreted as auto

User · Answer

I originally found a CSS way to bypass this when using the Cycle jQuery plugin  Cycle uses JavaScript to set my slide to overflow  hidden  so when setting my pictures to width  100  the pictures would look vertically cut  and so I forced them to be visible with  important and to avoid showing the slide animation out of the box I set overflow  hidden to the container div of the slide  Hope it works for you   UPDATE - New Solution   Original problem -  http   jsfiddle net xMddf 1   Even if I use overflow-y  visible it becomes  auto  and actually  scroll      content       height  100px      width  200px      overflow-x  hidden      overflow-y  visible      The new solution -  http   jsfiddle net xMddf 2   I found a workaround using a wrapper div to apply overflow-x and overflow-y to different DOM elements as James Khoury advised on the problem of combining visible and hidden to a single DOM element     wrapper       height  100px      overflow-y  visible     content       width  200px      overflow-x  hidden

User · Answer

I used the content wrapper approach     but I did something different than mentioned so far  I made sure that my wrapper s boundaries did NOT line up with the content s boundaries in the direction that I wanted to be visible   Important NOTE  It was easy enough to get the content wrapper  same-bounds approach to work on one browser or another depending on various css combinations of position  overflow-   etc     but I never could use that approach to get them all correct  Edge  Chrome  Safari         But when I had something like      lt div id  hack wrapper     created solely for this purpose        style  position absolute  width 100   height 100   overflow-x hidden   gt         lt div id  content wrapper             style  position absolute  width 100   height 15   overflow visible   gt                         content with too-much horizontal content             lt  div gt     lt  div gt        all browsers were happy

[html] CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

Examples related to html

Examples related to css

Examples related to overflow