ExtJS Toolbar Overflow Handler not displaying on screen resize

Question

I have created a toolbar inside a panel header but the overflow menu doesn't appear on screen resize.
Menu when the screen is not resized

On Screen resize the buttons are not showing in overflow menu.

Ext.application({
    name: 'Fiddle',
    launch: function () {
        Ext.onReady(function () {
            Ext.create('Ext.panel.Panel', {
                width: 500,
                height: 500,
                renderTo: Ext.getBody(),
                collapsible: true,
                header: {
                    title: {
                        text: 'title',
                        flex: undefined
                    },
                    items: [{
                        xtype: 'toolbar',
                        width: 400,
                        overflowHandler: 'menu',
                        items: [{
                            xtype: 'button',
                            text: 'test1'
                        }, {
                            xtype: 'button',
                            text: 'test2'
                        }, {
                            xtype: 'button',
                            text: 'test3'
                        }, {
                            xtype: 'button',
                            text: 'test4'
                        }, {
                            xtype: 'button',
                            text: 'test5'
                        }, {
                            xtype: 'button',
                            text: 'test6'
                        }],

                    }, {
                        xtype: 'tbfill'
                    }]

                }
            });
        });
    }
});

Answer 1

Here is a fiddle. I set a layout using hbox and set a flex on the two different components in the header. also set the panel and header to resizable: true.