"overflow-y: scroll"; hides overflow elements on a horizontal line

Question

I have a div parentcontaining the absolute layout of the childdiv.

The div childis located outside the initial borders of the parentdiv. It displayed normally without any problems.

I added overflow-y: scroll;to the div parent, and now the element childis hidden, despite the addition overflow-x: visible;.

CSS

#parent{
     position: relative;
     overflow-y: scroll;
     overflow-x: visible;
}
#child{
     position: absolute;
     left: -50px;
}

Also fidle

Answer 1

Well found this on stackoverflow, but you will not be happy.

CSS overflow-x: visible; and overflow-y: hidden; causing a scroll problem

, ,

visible overflow-x overflow-y - , visible . visible auto.

W3, .

overflow-x , auto. ( , .), overflow-y .

EDIT:

, , .

HTML

<div id=parent>
    <div id=absolute-child>
        This is the child
    </div>
    <div id=child>
        This is the child
    </div>
</div>

CSS

body {
    text-align: center;
}
#parent{
    display:inline-block;
    position: relative;
    text-align: left;
}
#absolute-child {
    background-color: red;
    color: white;
    position: absolute;
    left: -50px;
}
#child{
    border: solid 1px black;
    width: 200px;
    height: 200px;
    overflow-x: visible;
    overflow-y: scroll;
    margin-left: auto;
    margin-right: auto;
}

http://jsfiddle.net/BFLQr/

, , .

, div div div, . , , . div shrink to fit, display: inline-block, div.

absolute , , absolute "shrink to fit". " " relative, div absolute . , inline-block, , text-align center , . , align left #parent #child .

, .:)

P.S. , #child. -align left