title: Dragging A Child Out Of A Container With Overflow-y:scroll
body: <p>I have a container with a list inside. The list items can be dragged, moving with the mouse.</p>
  
  <p>The container is scrollable with:</p>
  
  <pre><code>overflow-y: scroll;
  </code></pre>
  
  <p>By setting this property, Chrome automatically sets the <code>overflow-x</code> property to 'auto'. If I set <code>overflow-x: visible</code> it is ignored by Chrome. If I set <code>overflow-x: hidden</code> then obviously the item is cropped.</p>
  
  <p>When I drag a list item outside of the left or top edge of the container, it is cropped to the edges of the container. If I drag it out of the right or bottom edges the container scrolls to accommodate it. I would like the item to be able to dragged outside of the container without it being cropped and without it triggering scroll.</p>
  
  <p>Given that the container must be set to <code>overflow-y: scroll</code> and that this in turn forces Chrome to set <code>overflow-x: auto</code>, is there any way I can achieve this or is it impossible?</p>
  
  <p>Codepen: <a href="http://codepen.io/Pedr/pen/azLWeY" rel="nofollow">http://codepen.io/Pedr/pen/azLWeY</a></p>
  
  <p><strong>Note:</strong> I know I can hack this by using padding to offset the container (so that the limits of the container actually end beyond its visual edges), but that is not an option in my situation.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
    $('.Wrapper').mousemove(function(event){
      $('.Item').offset({left: event.pageX, top: event.pageY});
    });
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  body {
    height: 100%;
  }
  
  .Wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
  }
  
  .Container {
    background: grey;
    position: absolute;
    width: 50%;
    left: 25%;
    min-height: 100%;
    overflow-y: scroll;
    overflow-x: hidden; // Clips Item
    // If left at auto it will clip the item on the top and left edge and scroll if the item overlaps the bottom or right edge.
  }
  
  .Item {
    padding: 20px;
    background: red;
    position: absolute;
    width: 600px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="Wrapper"&gt;
    &lt;div class="Container"&gt;
      &lt;div class="Item"&gt;ITEM&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>