title: CSS Overflow - Not working as expected
body: <p><a href="http://jsfiddle.net/bSnaG/" rel="noreferrer">http://jsfiddle.net/bSnaG/</a></p>
  
  <p>In my mind the above example should look like a grey box with <code>#x</code> not going past the edge and <code>#y</code> poking out the bottom. </p>
  
  <p>But it's not like that - apparently setting <code>overflow-x: hidden;</code> causes <code>overflow-y: scroll | auto;</code>.</p>
  
  <p>Is there any way around this?<br>
  I need to allow certain elements to escape the bounding box without setting <code>overflow: visible</code> on <code>#box</code>.</p>