How can I make ExtJS 4.2.1 empty grid respect flex layout value?

In the code below, if you replace:

Code:

Ext.create('Ext.container.Container'

with:

Code:

Ext.create('Ext.container.Viewport'

The top grid correctly occupies 70% of the available area.

But when the code has Container and not Viewport, the top grid is very small.

Of course my real code is within a larger application, so I cannot use a Viewport at that point, I must use container.

Code:

Ext.define('MyGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.myGrid',
    columns: [{
        text: 'First Name',
        dataIndex: 'fname'
    }],
    store: Ext.create('Ext.data.Store', {
        fields: ['fname']
    })
});


Ext.onReady(function() {
    Ext.create('Ext.container.Container', {
        renderTo: Ext.getBody(),
        layout: 'fit',
        items: [{
            xtype: 'container',
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            defaults: {
                autoScroll: true,
                bodyPadding: 0
            },
            items: [{
                xtype: 'myGrid',
                itemId: 'grid1',
                flex: 7
            }, {
                xtype: 'splitter'
            },{
                xtype: 'tabpanel',
                itemId: 'mypanel',
                width: 400,
                height: 400,
                renderTo: document.body,
                flex: 3,
                scroll: true,
                resizable: false,
                activeTab: 0,
                items: [{
                    xtype: 'myGrid',
                    itemId: 'tabgrid1',
                    title: 'My Grid Tab One'
                },{
                    xtype: 'myGrid',
                    itemId: 'tabgrid2',
                    title: 'My Grid Tab Two'
                }],
                tabBar:{
                    //plain:true,
                    items:[{
                        xtype: 'tbfill'
                    },{
                        text:'????',
                        xtype:'image',
                        src: 'panelCollapseBtn.png',
                        closable: false,
                        listeners:{
                            'afterrender':function (comp) {
                                comp.getEl().on('click', function (el) {
                                    //  alert(comp.up('#mypanel').getCollapsed());
                                    var panel =  comp.up('#mypanel');
                                    var isCollapsed = panel.getCollapsed();
                                    //alert('is collapsed: ' + isCollapsed);
                                    panel.header = !isCollapsed;
                                    //panel.collapsible =isCollapsed;
                                    comp.setSrc(isCollapsed?"panelCollapseBtn.png":"panelExpandBtn.png");
                                    panel.toggleCollapse();


                                }, this);
                                comp.getEl().on('mouseover', function (el) {
                                    el.target.style.cursor = "pointer";
                                }, this);
                            }
                        }
                    }]
                }
            }]
        }]
    });
});