Dragscroll a div containing floated divs

Question

I am trying to drag-scroll a div containing floated elements. You can play with it here

The intent is that dragging the grey area should drag the pane. I have applied suggestions from similar "expand div to floated content" questions. This is my best effort - vertical overflow looks good but horizontal scroll does not.

1. added a clear element to the end of the floated elements
2. added "overflow: hidden;" to parent of floated elements
3. tried floating the parent div but this didn't seem to fix it

Setting a fixed width works but the content is dynamic.

Code

<div class="title">Tall elements - ok</div>

<div id="wrapper">
    <div id="scroller">
        <div id="items">
            <div class="item-tall">hi</div>
            <div class="item-tall">ho</div>
            <div class="item-tall">off</div>
            <div class="item-tall">...</div>
            <div class="clear"></div>
         </div>
    </div>
</div> 

<div class="title">Wide elements - not ok</div>

<div id="wrapper2">
    <div id="scroller2">
        <div id="items2">
            <div class="item-wide">hi</div>
            <div class="item-wide">ho</div>
            <div class="item-wide">off</div>
            <div class="item-wide">...</div>
            <div class="clear"></div>
         </div>
    </div> 
</div>

$('#wrapper, #scroller').dragscrollable({
    dragSelector: '#items', 
    acceptPropagatedEvent: false
});

$('#wrapper2, #scroller2').dragscrollable({
    dragSelector: '#items2', 
    acceptPropagatedEvent: false
});

    #wrapper {
    width: 220px;
    height: 200px;
    overflow: auto;
    border: 1px solid #ff0000;    
    background-color: lightgray;
    cursor: all-scroll;    
}

#scroller {
    height: 100%;
}

#wrapper2 {
    width: 220px;
    height: 200px;
    overflow: auto;
    border: 1px solid #ff0000;    
    background-color: lightgray;
    cursor: all-scroll;
}

#scroller2 {
    height: 100%;    
}

#items {
    overflow: hidden;    
}

#items2 {
    height: 100%;
    /* width: 500px; this will fix it */
    overflow: hidden;      
}

.item-tall {
    width: 30px;
    height: 500px;
    float: left;     
    background-color: white;
    cursor: default;
}

.item-wide {
    height: 30px;
    min-width: 1000px;
    float: left;   
    background-color: white;
    cursor: default;
}

.clear {
    clear: both;
}

.title {
    padding: 20px;
}

References

1. Horizontal scroll in a parent div containing floated child divs

2. Floating elements within a div, floats outside of div. Why?

Answer 1

So, What do you want? Horizontal scroll bar should not appear in your second item? For that don't assign width in the second wrapper.You have assigned width:220px; , in the second wrapper but only one child has width:300px ,ie greater than parent width that's why the horizontal scroll bar is coming. Don't use width for wrapper2 ....

#wrapper2 {

    height: 200px;
    overflow: auto;
    border: 1px solid #ff0000;    
    background-color: lightgray;
    cursor: all-scroll;
}

I hope this works.