Scrollable direction both not working

[JRRB]

I have a panel that loads some HTML. Until I figure out how to scale properly for different devices, I want to enable scrolling in both horizontal and vertical directions. I'm getting some very odd behavior (testing in Chrome on Win7):

'auto' & 'vertical': both scroll vertically mostly correctly, but if you keep pulling down, it seems to make the viewport smaller & begins to cut off the content

'horizontal': can't scroll vertically anymore, and scrolling horizontally doesn't work; it always bounces back to the left side.

'both': combination of 'vertical' and 'horizontal' behavior. Can scroll vertically, but attempting to scroll horizontally doesn't work (as described above).

The content I'm loading into my panel:

 var panel = Ext.create('Ext.Panel', {
            type: 'vbox',
            align: 'default',
            scrollable: {
                direction: 'horizontal'
            },
            html: [
                "<a name=\"top\"></a>",
                "<div id=\"vertical\"></div>",
                "<div id=\"wrapper\" class=\"title_page\">",
                 ...
                "</div>",
                "<a name=\"abs_bottom\"></a>"
            ].join("")
        });

        Ext.Viewport.add(panel); 

Chrome reports the computed style on "wrapper" as:

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-drag: none;
-webkit-user-select: none;
background-color: transparent;
background-image: none;
clear: both;
color: #464547;
display: block;
font-family: Arial, sans-serif;
font-size: 18px;
font-weight: bold;
height: 720px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
min-height: 0px;
min-width: 0px;
overflow-x: visible;
overflow-y: visible;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: static;
width: 1024px; 

As you can see, I have height & width set explicitly. Any ideas how to get this to work properly?

[mitchellsimoens]

Working for me:

var panel = Ext.create('Ext.Panel', {
    scrollable : {
        direction : 'both'
    },
    width      : 400,
    height     : 400,
    items      : [
        {
            html   : 'wide component',
            width  : 600,
            height : 200
        },
        {
            html   : 'tall component',
            height : 600
        }
    ]
});

Ext.Viewport.add(panel);

Removed the type and align configs as they are not valid configs of Ext.Panel.

[JRRB]

Thanks for replying.

Is it required to have a width and height set in the config in order for scrolling to work? Or can I set the same dimensions in CSS and have it still work properly?

[mitchellsimoens]

html can overflow the panel but one way or another the body needs to be wider than the component. I used static sizing to demonstrate that it does work.