ExtJs: scrollable tabpanel did not work properly in multiple tabs

I have the layout in the following picture

The Code : fiddle

The problem is when I have multiple tabs like (first tab & second tab) the content in the second tab do not respect the scroll bar, so it drow the content as there is no scroll

but when I Remove the first tab as the second picture (comment the line 15) i got it working perfectly.

So, How can I have multible tabs and keep the eadge between the scroll and the send tab panel contents ?

Short

Your example works for me.

improved Alternative

I would recommend to add the scrollable to the component inside the tabpanel.

• Usually the height is defined by the height of the child components. I guess you are using minHeight to simulate things.

Here is my approach in Detail:

Ext.define('myapp.layout', {
    extend: 'Ext.container.Viewport',
    
    layout: 'border',
    
    items: [
        {xtype: 'panel', title: 'north', region: 'north', height: 100, border: 1},
        {xtype: 'panel', title: 'west', region: 'west', width: 100, border: 1},
        {
            xtype: 'tabpanel', region: 'center',
            
            items: [
                {xtype: 'panel', title: 'first tab'},
                {xtype: 'panel', title: 'second tab',

                    // =>
                    scrollable: true,
                    
                    bodyPadding: 10,
                    layout: {type: 'vbox', pack: 'start', align: 'stretch'},
                    items: [
                        {xtype: 'panel', title: 'First Line', height: 100, border: 1},
                        {xtype: 'panel', title: 'Second Line',
                        
                        // =>
                        minHeight: 900, flex: 1,
                        
                        border: 1},
                    ]
                },
            ]
        }
    ]
});

Here I simulate that second line ends up with a height of 900 ==> therefore the scrollable is set to the parent component.