extjs 7.7.0: Problem resize border panel when resize parent container

Question

Ext.create('Ext.panel.Panel', {
    width: 500,
    height: 300,
    title: 'Border Layout',
    layout: 'border',
    resizable: true,
    items: [{
        title: 'East Region',
        region: 'east',
        xtype: 'panel',
        height: 100,
        split: true,
        flex: 1,
        margin: '5 5 0 0'
    },{
        title: 'Center Region',
        region: 'center',
        xtype: 'panel',
        flex: 1,
        margin: '5 5 0 0'
    }],
    renderTo: Ext.getBody()
});

After running the above code if I perform a resizing of the main panel (the panel with title 'Border Layout') the two child panels both adapt to the new size. If I move the splitter even slightly in one direction or the other and resize the main panel, the right panel remains stuck at the new size while only the central region panel is resized. I would like the behavior to be consistent with that before the splitter move. How can I get around this problem? Thank you in advance ;)