Overflow-y not working when overflow-x is hidden?

Question

I have a DIV that contains several other divs. I need divs to be able to peek out of the parent vertically, but not horizontally.

I thought using overflow-x and overflow-y would solve this little problem, but I can only get either x and y to show, or get them both to hide.

My CSS and HTML:

.game {
  position:absolute;
  width:400px; height:300px;
  top:100px; left:100px;
  background-color:#cccccc;

  overflow-x:hidden;
  overflow-y:visible;
}

.block1 {
  position:absolute;
  width:100px; height:100px;
  top:-50px; left:150px;
  background-color:#ffcccc;
}

.block2 {
  position:absolute;
  width:100px; height:100px;
  top:150px; left:-50px;
  background-color:#ccffcc;
}

<div class="game">
  <div class="block1"></div>
  <div class="block2"></div>
</div>

See this JSFiddle: both child divs are cut off, even though overflow-y is set to visible.

[this may help](http://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue) — Pete, Nov 25 '13 at 15:20
Thanks. Sadly it seems that you can't combine overflow-x and overflow-y if one of them is hidden. (it's beyond me why you can even specify x and y, if they can't be different from one another...) I'm also not sure about how to solve this issue in my particular case. — Kokodoko, Nov 25 '13 at 15:50
I agree that it makes no sense to me either that you cannot set one to `hidden` and the other to `visible` and have it work as expected. — ScottS, Nov 25 '13 at 15:56

score 4 · Accepted Answer · answered Nov 25 '13 at 15:55

Structural Change Needed

This gets what you want if it works otherwise (I don't know if the html/css changes affect other aspects of your game). It solves it by layering the "game" so that its vertical direction fills the entire screen, and then your "window" (grey area) is set by a child div. This allows the overflow: hidden horizontally, but not have it vertically.

See fiddle.

HTML

<div class="game">
    <div>
    <div class="block1"></div>
    <div class="block2"></div>
    </div>
</div>

CSS

html, body { height: 100%; margin: 0;}
.game {
    position:absolute;
    width:400px; 
    height:100%;
    top: 0; 
    left:100px;
    overflow:hidden;
}
.game > div {
    position: absolute;
    top: 100px;
    height: 300px;
    width: 100%;
    background-color:#cccccc;
}

.block1 {
    position:absolute;
    width:100px; height:100px;
    top:-50px; left:150px;
    background-color:#ffcccc;
}

.block2 {
    position:absolute;
    width:100px; height:100px;
    top:150px; left:-50px;
    background-color:#ccffcc;
}

Thanks, that works! Still, I will keep wondering why they added overflow-x and overflow-y. — Kokodoko, Nov 25 '13 at 16:01
I'll wonder with you. Here is a helpful (though slightly outdated, but I think generally still valid) [link illustrating the various combinations](http://www.brunildo.org/test/Overflowxy2.html). — ScottS, Nov 25 '13 at 16:33
spent ages trying to figure out a solution then searching around, this answer works perfectly! — Hayko Koryun, Apr 03 '15 at 15:09

powercoder23 · Answer 2 · 2013-11-25T15:36:15.700

-1

try Changing your game class to

.game {
     width:400px; height:300px;
    top:100px; left:100px;
    background-color:#cccccc;
    overflow-x:hidden;
    overflow-y:auto;
}

Thanks, Dhiraj

edited Nov 25 '13 at 15:36

answered Nov 25 '13 at 15:30

powercoder23

1,404
1
13
22

Overflow-y not working when overflow-x is hidden?

2 Answers2

Structural Change Needed

See fiddle.