jQuery Ui Draggable no scrolling with flexbox

Question

I want to sort some container with jquery Ui draggable/droppable.

Because of having a straight horizontal line of elements I'm using display: flex . This works pretty well while adding items to my list.

But my list could be larger then the viewport. So i need to scroll while dragging my elements.

Here is my fiddle: http://jsfiddle.net/r9vc9uyd/

Html

<div class="mainwrap">
        <div class="flexwrap">
            <div class="item item--small"><p>Loremlorem</p></div>
            <div class="item"><p>Loremlorem</p></div>
            <div class="item"><p>Loremlorem</p></div>
            <div class="item"><p>Loremlorem</p></div>
            <div class="item"><p>Loremlorem</p></div>
            <div class="item"><p>Loremlorem</p></div>
            <div class="item"><p>Loremlorem</p></div>
            <div class="item"><p>Loremlorem</p></div>
            <div class="item"><p>Loremlorem</p></div>
            <div class="item"><p>Loremlorem</p></div>
            <div class="item"><p>Loremlorem</p></div>
            <div class="item"><p>Loremlorem</p></div>
            <div class="item"><p>Loremlorem</p></div>

        </div>
    </div>

CSS

.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;
        }

Javascript

$("document").ready(function() {
    $(".item").draggable({
        helper: 'clone',
        opacity: 0.8,
        scroll: true,
        refreshPositions: true,
        scrollSensitivity: 100,
    });
});

Answer 1

Flexbox was not the problem. I succeeded to drag and make the container scroll after removing the property: helper: 'clone'