In ExtJS, I'm having a little trouble placing two fieldsets side-by-side in a panel with a hbox layout. The hbox layout seems to be unaware of the fieldset's height, and cuts it off, even if I explicitly set the panel's height to something large.

Here's what it looks like:

The blue border is the hbox panel, and there's 2 fieldsets inside, 'Client Info' and 'Owner Info'. The code is like so (simplified and runnable in Firebug):

var clientInfo = {
    xtype: 'fieldset',
    defaultType: 'textfield',
    title: 'Client Info',
    items:
    [
        { fieldLabel: 'First Name' },
        { fieldLabel: 'Last Name' },
        { fieldLabel: 'Cell Phone #' },
        { fieldLabel: 'Work Phone #' }
    ]
};

var ownerInfo = {
    xtype: 'fieldset',
    defaultType: 'textfield',
    title: 'Owner Info',
    items:
    [
        { fieldLabel: 'First Name' },
        { fieldLabel: 'Last Name' },
        { fieldLabel: 'Cell Phone #' },
        { fieldLabel: 'Work Phone #' }
    ]
};

new Ext.Panel({
    layout: 'hbox',
    frame: true,
    height: 400,
    width: 800,
    defaults: { flex: 1 },
    items: [ clientInfo, ownerInfo ]
}).render(document.body);

P.S. If you remove defaults: { flex: 1 }, the fieldsets render correctly, but doesn't automatically resize to fit the container, which is something I need.

Does anybody know how to fix this rendering issue? Thanks.