title: In ExtJS, how do I place two fieldsets side-by-side in a panel with a hbox layout?
body: <p>In ExtJS, I'm having a little trouble placing two fieldsets side-by-side in a panel with a <code>hbox</code> layout. The <code>hbox</code> 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.</p>
  <p>Here's what it looks like:</p>
  <p><a href="https://i.stack.imgur.com/DShvD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DShvD.png" alt="" /></a></p>
  
  <p>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):</p>
  <pre><code>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);
  </code></pre>
  <p>P.S. If you remove <code>defaults: { flex: 1 }</code>, the fieldsets render correctly, but doesn't automatically resize to fit the container, which is something I need.</p>
  <p>Does anybody know how to fix this rendering issue? Thanks.</p>