overflow-x: hidden sets overflow-y to auto/scroll behaviour

Question

I have the following HTML and CSS

<div id="box1">
    <div id="box2"></div>
</div>

#box1 {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 200px;
    height: 85px;
    background: blue;
    overflow-y: hidden;
    overflow-x: visible;
}

#box2
{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: red;
    position: absolute; 
    bottom: 0px;
    right: -5px;
}

I'm trying to achieve an effect where the #box2 is positioned partly outside of #box1. I want the overflow out of the top and bottom of #box1 to be hidden but the overflow left and right to be visible.

However when I set overflow-y: hidden on the container #box1, it seems to set overflow-x to scroll/auto behaviour. I don't want any scrolling I just want the overflow to be visible. Does anyone know how to do this?

Here is a demo of the problem.

There are some similar question that have been asked on SO but the solutions to those questions didn't really apply to my scenario

you will need a second wrapper box, here is a nice thread: http://www.stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue — Nico O, Mar 14 '14 at 11:29

SW4 · Accepted Answer · 2014-03-14T11:36:59.450

Unfortunately this is something you cant accomplish with your HTML structure, the only way you can position a child outside a parent is to use position:absolute as you have, typically on a parent with position:relative. However, if you set the overflow on the parent to anything other than auto for either x or y it will have the effect of cropping any child elements positioned outside its boundaries, regardless of position:absolute

What you can do is add a wrapper, though it may not produce the solution you're after

Sample Fiddle

HTML

<div id="box1">
    <div id="box2">
        <div id="box3"></div>
    </div>
</div>

CSS

#box1 {
    position: relative;
    top: 10px;
    left: 10px;
    width: 200px;
    height: 85px;
    background: blue;
}
#box2 {
    width: 700px;
    height: 100%;
    position: absolute;
    bottom: 0px;
    left:-50px;
    overflow:hidden;
}
#box3 {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: red;
    position: absolute;
    bottom: 0px;
    left: 200px;
}

Thanks for passing on this knowledge – Pattle Mar 14 '14 at 11:46 — Pattle, Mar 14 '14 at 11:46

overflow-x: hidden sets overflow-y to auto/scroll behaviour

1 Answers1

Sample Fiddle