title: jQuery Ui Draggable no scrolling with flexbox
body: <p>I want to sort some container with jquery Ui draggable/droppable.</p>
  
  <p>Because of having a straight horizontal line of elements I'm using <code>display: flex</code>. This works pretty well while adding items to my list.</p>
  
  <p>But my list could be larger then the viewport. So i need to scroll while dragging my elements.</p>
  
  <p>Here is my fiddle: <a href="http://jsfiddle.net/r9vc9uyd/" rel="nofollow">http://jsfiddle.net/r9vc9uyd/</a></p>
  
  <p>Html</p>
  
  <pre><code>&lt;div class="mainwrap"&gt;
          &lt;div class="flexwrap"&gt;
              &lt;div class="item item--small"&gt;&lt;p&gt;Loremlorem&lt;/p&gt;&lt;/div&gt;
              &lt;div class="item"&gt;&lt;p&gt;Loremlorem&lt;/p&gt;&lt;/div&gt;
              &lt;div class="item"&gt;&lt;p&gt;Loremlorem&lt;/p&gt;&lt;/div&gt;
              &lt;div class="item"&gt;&lt;p&gt;Loremlorem&lt;/p&gt;&lt;/div&gt;
              &lt;div class="item"&gt;&lt;p&gt;Loremlorem&lt;/p&gt;&lt;/div&gt;
              &lt;div class="item"&gt;&lt;p&gt;Loremlorem&lt;/p&gt;&lt;/div&gt;
              &lt;div class="item"&gt;&lt;p&gt;Loremlorem&lt;/p&gt;&lt;/div&gt;
              &lt;div class="item"&gt;&lt;p&gt;Loremlorem&lt;/p&gt;&lt;/div&gt;
              &lt;div class="item"&gt;&lt;p&gt;Loremlorem&lt;/p&gt;&lt;/div&gt;
              &lt;div class="item"&gt;&lt;p&gt;Loremlorem&lt;/p&gt;&lt;/div&gt;
              &lt;div class="item"&gt;&lt;p&gt;Loremlorem&lt;/p&gt;&lt;/div&gt;
              &lt;div class="item"&gt;&lt;p&gt;Loremlorem&lt;/p&gt;&lt;/div&gt;
              &lt;div class="item"&gt;&lt;p&gt;Loremlorem&lt;/p&gt;&lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.mainwrap {
              width: 500px;
              display: block;
              background: yellow;
              height: auto;
              overflow-x: scroll;
              -webkit-overflow-scrolling: touch;
          }
  
          .flexwrap {
              zoom: 1;
              display: flex;
              flex-direction: row;
              padding: 10px 5px;
  
          }
  
          .item {
              width: 100px;
              margin: 0 5px;
              padding: 10px;
              background: #bada55;
              flex-grow: 0;
              flex-shrink: 0;
              flex-basis: 1;
              word-wrap: break-word;
  
          }
          .item--small {
              flex-shrink: 1;
              background: mediumvioletred;
              width: 50px;
          }
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>$("document").ready(function() {
      $(".item").draggable({
          helper: 'clone',
          opacity: 0.8,
          scroll: true,
          refreshPositions: true,
          scrollSensitivity: 100,
      });
  });
  </code></pre>