Overflow-X: Hidden Also Hides Vertical Content Too

Overflow y hidden breaks overflow x visible

So the only way I could get this working was to set the position of the blue box to be fixed and then using JavaScript to change the top and left values on document ready and window resize.

Fiddle here: http://jsfiddle.net/3dhdy9e9/15/

Code:

function positionBox(){
 var left = $('#theBox').offset();
left = left.left;

var top = $('#theBox').offset();
top = top.top;

    $('#theBox').css({ 'position': 'fixed', 'left': left, 'top': top });   
}

$(document).ready(function(){
    positionBox();
    $(window).resize(function(){
        positionBox();
    });
});

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

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

overflow x: hidden causes vertical scrollbar

I see two ways to achieve your goal:

1. Set height of .menu_container to auto

HTML stays as it was, here is the CSS:

.wrapper {
margin-top: 50px;
}

.menu_container {
color: #333;
text-align: center;
padding: 1em;
background: #607D8B;
width: 20%;
height: auto; /* NEW */
overflow-x:hidden;
}

.submenu {
background: #E0E0E0;
height: 100px;
width: 50px;
display: none; /* I added this to show the effect when .submenu is invoked */
}

.menu_container:hover .submenu {
display: block; /* I added this to show the effect when .submenu is invoked */
}

.menu_list {
width: 300px;
}

Just hover over .menu_container: FIDDLE

This solution will make .menu_container grow, so the rest of the content is pushed down when .submenu is shown.

2. Wrap .submenu in a seperate DIV and position it absolute

With this method, the .menu_container will not grow, so the following content stays where it is.

HTML:

<body>
 <div class="wrapper">
  <div class="submenu_container"> <!-- NEW -->
   <div class="menu_container">
    <div class="menu_list" align="left">
     Menu 1 Menu2 Menu 3
    </div>
   </div>
   <div class="submenu">
    sub
   </div>
  </div>
 </div>
</body>

CSS:

  .wrapper {
   margin-top: 50px;
  }

  .menu_container {
  color: #333;
  text-align: center;
  padding: 1em;
  background: #607D8B;
  width: 20%;
  height: 30px;
  overflow: hidden;
  }

  .submenu_container { /* NEW */
  position: relative;
  }

 .submenu {
 background: #E0E0E0;
 height: 100px;
 width: 50px;
 position: absolute; /* NEW */
 left: 20px; /* Adjust to your needs */
 top: 40px; /* Adjust to your needs */
 }

 .menu_list {
 width: 300px;
 }

See the FIDDLE

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

After some serious searching it seems i've found the answer to my question:

from: http://www.brunildo.org/test/Overflowxy2.html

In Gecko, Safari, Opera, ‘visible’
becomes ‘auto’ also when combined with
‘hidden’ (in other words: ‘visible’
becomes ‘auto’ when combined with
anything else different from
‘visible’). Gecko 1.8, Safari 3, Opera
9.5 are pretty consistent among them.

also the W3C spec says:

The computed values of ‘overflow-x’
and ‘overflow-y’ are the same as their
specified values, except that some
combinations with ‘visible’ are not
possible: if one is specified as
‘visible’ and the other is ‘scroll’ or
‘auto’, then ‘visible’ is set to
‘auto’. The computed value of
‘overflow’ is equal to the computed
value of ‘overflow-x’ if ‘overflow-y’
is the same; otherwise it is the pair
of computed values of ‘overflow-x’ and
‘overflow-y’.

Short Version:

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.

Allowing for overflow on the y-axis while hiding overflow on the x-axis

If you don't mind adding some extra markup , there seems to be an easy solution.

You'll just have to use two div, one for each overflow.

For example:

<div class="outer">
    <div class="middle">
         <!-- your content here -->
    </div>
</div>

And the following markup:

.outer {   
    overflow-y: visible;
}

.middle{
    overflow-x: hidden;
}

Seems to do the job.

A little example here.