I've a resizable panel which includes another panel with hbox layout inside. Whole display settings are correct expect one behaviour; when resizing main panel with mouse after render; it's not auto-fit items inside.

To be success fit those item; *need to resize main panel once again* or *refreshing main panel from tool config's gear*. How can I set this mouse event resizing as auto-fit?

Here is a [screenshot](http://prntscr.com/jjv36j) and both of panel's code snippets;

Main Panel:

```
Ext.define('MyApp.BasePanel', {
    extend: 'Ext.panel.Panel',
    xtype: 'basepanel',

    resizable: true,
    scrollable: true,
    frame: true,

    plugins: 'responsive',

    tools: [
        {
            type: 'refresh',
            handler: 'refreshPanel'
        },
        {
            type: 'gear',
            handler: 'setPanel'
        }
    ],

    initComponent: function() {
        var me = this;

        me.items = me.setupItems();
        me.callParent();
    },

    setupItems: function() {
        var me = this;

        return Ext.Array.merge(me.getChildPanel(), me.getOtherChildPanel());
    },

    getChildPanel: function () {
        return [];
    }, 

    getOtherChildPanel: function () {
        return [];
    }, 

```

Here is called child panel;

```
Ext.define('MyApp.ChildComponent', { 
//Calling this class with 'getChildPanel()' method on BasePanel.
    extend: 'Ext.container.Container',
    alias: 'widget.mychildcomponent',

    layout: {
        type: 'hbox', align: 'stretch', pack: 'center'
    },

    defaults: {
        margin: 10,
        width: 300,
        height: 90,
        flex: 1
    },

    items: [
        {

```