Why does grid exceed panel container size?

[FanOfExt]

See attached image.

I have a region defined as

{
                    //GRID AREA
                    region: 'center',
                    title: 'data section',
                    xtype: 'panel',
                    layout: 'border',
                    collapsible: true,
                    collapseDirection: 'top',
                    width: '100%',
                    items: [{
                        region: 'center',
                        xtype: 'container',
                        layout: 'fit',
                        width: '100%',
                        height: '100%',                
                        id: 'gridArea'
                    }]
                },

and i add a grid to the region as

var grid = new Ext.grid.GridPanel({
           id: 'mainGrid',
           padding: '2 2 2 2',
        renderTo: 'gridArea',
        store: teamStore,
           autoScroll: true,
           height: '100%',
        width: '100%',
           headers: [{
               text: 'Id',
               dataIndex: 'Id'
           },{
               text: 'Name',
               dataIndex: 'Name'
           }]
   });

In the attached screenshot the before picture shows how the grid fits nicely in the panel container.

When the left nav side is expanded the grid seems to expand beyond the panel container edge, instead of being re-sized. Even though the grid expands past the panel edge, no scroll bars appear at the bottom of the grid or panel.

After the panel container size changes, how do I ensure the grid is also re-sized to fit within the new panel size?


Thanks in advance