hbox titlebar items getting trimmed

I have 2 button inside a titlebar , as below,

Code:

xtype: 'titlebar',
                cls: 'toolbar',
                docked: 'top',
                itemId: 'lookupBar',
                layout: {
                    type: 'hbox',
                    align: 'end'
                },
                items: [
                    {
                        xtype: 'button',
                        flex: 1,
                        itemId: 'btnBack',
                        ui: 'back'
                    },
                    {
                        xtype: 'button',
                        flex: 1,
                        align: 'right',
                        itemId: 'btnEntitySearch',
                        ui: 'forward'
                    }
                ]

But if Text in this 2 button is large, then 2nd button getting trimmed ,issue2.png

After looking in generated CSS, I can see that for first button we have a "

-webkit-box-flex: 1; width: 128px !important;

"

but it was not for 2nd button !!!

Any Idea what is wrong here ?

hbox titlebar items getting trimmed