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.

Answer 1

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;
}