title: CSS - Can't get overflow:hidden to work when overflowing on right or bottom
body: <p>I have created a template that contains a panel and a content. Depending on the template's class (Top, Left, Right, or Bottom) the panel will have a different position. The expand and collapse animations are performed using transition and classes.</p>
  
  <p>EDIT:
  Here is a fiddle: <a href="http://jsfiddle.net/ckkVx/2/" rel="nofollow">http://jsfiddle.net/ckkVx/2/</a>
  /EDIT</p>
  
  <p>Here is the HTML code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;link href="../Css/reset.dev.css" type="text/css" rel="stylesheet"&gt;
          &lt;link href="../Css/V_PanelTemplate.dev.css" type="text/css" rel="stylesheet"&gt;
          &lt;script src="../Js/jquery-1.9.1.min.js" type="text/javascript"&gt;
          &lt;script src="../Js/V_PanelTemplate.dev.js" type="text/javascript"&gt;
      &lt;/head&gt;
      &lt;body class="PanelTemplate Bottom"&gt;
          &lt;div class="Panel AutoHide Collapsed"&gt;PANEL&lt;/div&gt;
          &lt;div class="Content Expanded"&gt;CONTENT&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And here is the CSS code:</p>
  
  <pre><code>#CHARSET "UTF-8";
  
  .PanelTemplate {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
      }
  .PanelTemplate &gt; .Panel,
  .PanelTemplate &gt; .Content {
      position: absolute;
      -webkit-transition: ease-in-out 400ms;
         -moz-transition: ease-in-out 400ms;
          -ms-transition: ease-in-out 400ms;
           -o-transition: ease-in-out 400ms;
              transition: ease-in-out 400ms;
      }
  .PanelTemplate.Top &gt; .Panel,
  .PanelTemplate.Bottom &gt; .Panel {
      height: 100px;
      left: 0;
      right: 0;
      }
  .PanelTemplate.Left &gt; .Panel,
  .PanelTemplate.Right &gt; .Panel {
      width: 200px;
      top: 0;
      bottom: 0;
      }
  .PanelTemplate.Top &gt; .Content,
  .PanelTemplate.Bottom &gt; .Content {
      left: 0;
      right: 0;
      }
  .PanelTemplate.Left &gt; .Content,
  .PanelTemplate.Right &gt; .Content {
      top: 0;
      bottom: 0;
      }
  .PanelTemplate.Top &gt; .Panel {
      top: -90px;
      }
  .PanelTemplate.Left &gt; .Panel {
      left: -190px;
      }
  .PanelTemplate.Right &gt; .Panel {
      right: -190px;
      }
  .PanelTemplate.Bottom &gt; .Panel {
      bottom: -90px;
      }
  .PanelTemplate.Top &gt; .Panel.Expanded {
      top: 0;
      }
  .PanelTemplate.Left &gt; .Panel.Expanded {
      left: 0;
      }
  .PanelTemplate.Right &gt; .Panel.Expanded {
      right: 0;
      }
  .PanelTemplate.Bottom &gt; .Panel.Expanded {
      bottom: 0;
      }
  .PanelTemplate.Top &gt; .Content {
      top: 100px;
      bottom: 0;
      }
  .PanelTemplate.Left &gt; .Content {
      left: 200px;
      right: 0;
      }
  .PanelTemplate.Right &gt; .Content {
      right: 200px;
      left: 0;
      }
  .PanelTemplate.Bottom &gt; .Content {
      bottom: 100px;
      top: 0;
      }
  .PanelTemplate.Top &gt; .Content.Expanded {
      top: 10px;
      }
  .PanelTemplate.Left &gt; .Content.Expanded {
      left: 10px;
      }
  .PanelTemplate.Right &gt; .Content.Expanded {
      right: 10px;
      }
  .PanelTemplate.Bottom &gt; .Content.Expanded {
      bottom: 10px;
      }
  /* Test CSS */
  .PanelTemplate &gt; .Panel {
      background: #777;
      color: #FFF;
      }
  .PanelTemplate &gt; .Content {
      background: #333;
      color: #FFF;
      }
  </code></pre>
  
  <p>And, if needed, the JavaScript code:</p>
  
  <pre><code>(function($) {
  
      $(document).ready(function() {
  
          var CLOSE_DELAY = 1000;
  
          var $panel = $('.PanelTemplate &gt; .Panel.AutoHide').first();
              $content = $('.PanelTemplate &gt; .Content').first();
  
          $panel.mouseenter(function() {
              $panel
                .addClass('Expanded')
                .removeClass('Collapsed')
                .data('isMouseOver', true);
              $content
                .removeClass('Expanded')
                .addClass('Collapsed');
          }).mouseleave(function() {
              $panel.data('isMouseOver', false);
              // Waiting a short time in case the mouse accidently leaves
              var timeout = setTimeout(function() {
                  // If it's no longer over after time out, closing
                  if( ! $panel.data('isMouseOver')) {
                      $panel
                        .removeClass('Expanded')
                        .addClass('Collapsed');
                      $content
                        .addClass('Expanded')
                        .removeClass('Collapsed');
                  }
                  clearTimeout(timeout);
              }, CLOSE_DELAY);
          });
      });
  })(jQuery);
  </code></pre>
  
  <p>When I'm using the classes Top or Left on my template, everything works as intended, but when I use either Right or Bottom, the panel, while moving out of the body, expends the window and causes scroll bars to appear.</p>
  
  <p>I read in another question related to <code>overflow:hidden</code> than it could be due to a relatively positioned element, but I don't have any. I also tried to position the html tag and add <code>overflow:hidden</code> to it too, but it didn't help either.</p>
  
  <p>What can I do to prevent this ?</p>