Overflow-y not working when overflow-x is hidden?
css, html
Solution
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;
}
Problem
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.