"overflow-y: scroll;" is hiding overflowing elements on the horizontal line

Question

I have a parent div that contains an absolute positioned child div.

The child div is positioned outside the initial boundaries of parent div. It was rendering normally without any problems.

I added an overflow-y: scroll; to the parent div, and now the child element is hidden despite adding overflow-x: visible;.

CSS

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

Also a Fidle

Answer 1

Well found this on stackoverflow, but you aren't going to be happy.

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

To put it short the answer says this

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.

His answer goes more in depth talking about the W3 spec which explains this occurrence.

Pretty much your overflow-x can't be visible because it will turn to auto. (which part of that style hides the content that goes out of it.) if your overflow-y is anything different from it.

EDIT:

You could try this however as a workaround for that spec.

HTML

/*Necessary styles for example*/
#parent{
  display: inline-block;
  position: relative;
}
#absolute-child {
    position: absolute;
    left: -50px;
}
#child{
    overflow-y: scroll;
}

/*Below here is styles only for display purposes*/
body {
  display:flex;
  justify-content: center;
}

#absolute-child {
    background-color: red;
    color: white;
}

#child{
    border: solid 1px black;
    width: 200px;
    height: 200px;
    overflow-y: scroll;
}

#child {
    border: solid 1px black;
    width: 200px;
    height: 200px;
}

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

http://jsfiddle.net/BFLQr/

Give me a second to explain what I did.

EDIT

So first of all I basically had to move your parent div to be a child div of the parent div that is now there. This is a little strange, but it's the only thing I could think of. The now parent div has the "shrink to fit" style applied to it through display: inline-block this wraps it around it's child divs.

Since position absolute gets pushed out of the document flow this means your absolute position child does not affect the width or height of it's new "shrink to fit" parent. The "shrink to fit" parent also has display relative this let's your absolute position div be positioned according to it. Also since the parent is now display inline-block in order to center it you must use text-align center on it's containing element. which means you also need to put text align left on your #parent or #child elements.

Hope this helped. :)

P.S. I edited the fiddle it had an unnecessary position relative on the #child element. I also added the text-align left to the new parent

Answer 2

You can just nest another child container that holds the scrollable content which has overflow: scroll and keep your absolute div on the parent.

.box1 {
  position: relative;
  height: 100vh;
  background: red;
  width: 200px;
}

.box2 {
  height: 100%;
  background: dodgerblue;
  width: 200px;
  overflow-y: scroll;
}


.box3 {
  position: absolute;
  width: 50px;
  height: 50px;
  right: -25px;
  top: 0;
  background: pink;
}

<div class="box1">
    <div class="box2">
     <p>item</p>
     <p>item</p>
     <p>item</p>
     <p>item</p>
     <p>item</p>
     <p>item</p>
     <p>item</p>
     <p>item</p>
     <p>item</p>
     <p>item</p>
     <p>item</p>
     <p>item</p>
     <p>item</p>
     <p>item</p>
     <p>item</p>
  </div>
  
  
  <div class="box3">
  
  </div>
</div>

Fiddle: https://jsfiddle.net/tylorkolbeck/wmcu9jb1/2/