jQuery.draggable() disable horizontal scroll

Question

How to Disable horizontal scrolling? overflow-x: hidden, doesn't work for me. I wanna drag the lightblue square into the pink field and I need vertical scrolling, but when I enable it the draggable get's caught in the left div.

Here's a fiddle which shows my Problem:

https://jsfiddle.net/2hzxpm3y/

<div class="left">
  <div class="draggable"></div>
</div>

<div class="right">

</div>

.draggable {
  width: 50px;
  height: 50px;
  background-color: lightblue;
}

.left {
  float: left;
  width: 20%;
  height: 100px;
  overflow-y: scroll;
}

.right {
  float: right;
  width: 80%;
  height: 100px;
  background-color: pink;
}

Thanks!

Answer 1

Try this:

.left {
  float: left;
}

here is jsfiddle