Weird behaviour moving splitter in ExtJS borderlayout

Question

I have a Viewport with a Borderlayout. Between center and west there is a splitter. When I move the splitter to the right, it gets a new position, but it scrambles my whole layout:

Before moving it looks like this:

After moving (not while moving!), the splitter is "hidden" and only visible when I hover over the new position. Look at the right - there is a new unwanted margin:

When I move the splitter to the left (just a few pixels), the new layout is applied correctly!

In case you need code, here I have the panel with the border-layout. If you need more, I'll provide it immediately.

Ext.define('MyApp.view.Main', {
extend: 'Ext.container.Container',
requires: [ // ...
],
layout: {type: 'border'},
items: [{
        region: 'north',
        height: 50,
        collapsible: false,
        frameHeader: false,
        html: '<a href="/">Main</a>'
    },{
        region: 'west',
        xtype: 'panel',
        title: 'west',
        collapsible: true,
        resizable: true,
        frame: true,
        border: false,
        width: 250,
        layout: 'fit',
        tools: [ // ...
        ],
        items: [{
            xtype: 'workoutlist'
        }]
    },{
        region: 'center',
        title: 'center',
        xtype: 'centerView'
}]

});

Answer 1

Thanks to @Evan Trimboli I've replaced resizable: true with split: true, which helped in another problem.

The real cause of the problem was in the centerView:

Ext.define('MyApp.view.CenterView', {
    extend: 'Ext.tab.Panel',
    alias: 'widget.centerView',
    enableTabScroll: true,
    layout: 'fit',
    // constrain: true, <-- this configuration option caused the weird behaviour
    autoShow: true,

    // ...

});

I don't know how the option constrain: true came to this view (probably some silly copy and paste error). Without, it works like a charm.