Flow layout with nested container

Question

In my Ext JS 6 app, I'm trying to create a flow layout with 3 containers, with the middle container having nested items that need to continue with the flow layout. I can get this working if I add the middle container's items directly, but I don't want to do that... I want them to be separate.

Here's an example:

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.panel.Panel', {
            height: 300,
            width: 300,
            scrollable: true,
            renderTo: Ext.getBody(),
            title: 'Not properly working',
            bodyPadding: 10,
            layout: {
                type: 'column'
            },
            items: [{
                xtype: 'panel',
                title: 'start',
                width: 100,
                height: 50
            }, {
                xtype: 'container',
                defaults: {
                    xtype: 'panel',
                    title: '1',
                    width: 50,
                    height: 50,
                    style: 'float: left;'
                },
                items: [{}, {}, {}, {}, {}, {}]
            }, {
                xtype: 'panel',
                title: 'end',
                width: 100,
                height: 50
            }]
        });
        Ext.create('Ext.panel.Panel', {
            height: 300,
            width: 300,
            scrollable: true,
            renderTo: Ext.getBody(),
            bodyPadding: 10,
            title: 'This is how it should look',
            layout: {
                type: 'column'
            },
            items: [{
                xtype: 'panel',
                title: 'start',
                width: 100,
                height: 50
            }, {
                xtype: 'panel',
                title: '1',
                width: 50,
                height: 50
            }, {
                xtype: 'panel',
                title: '1',
                width: 50,
                height: 50
            }, {
                xtype: 'panel',
                title: '1',
                width: 50,
                height: 50
            }, {
                xtype: 'panel',
                title: '1',
                width: 50,
                height: 50
            }, {
                xtype: 'panel',
                title: '1',
                width: 50,
                height: 50
            }, {
                xtype: 'panel',
                title: '1',
                width: 50,
                height: 50
            }, {
                xtype: 'panel',
                title: 'end',
                width: 100,
                height: 50
            }]
        });
    }
});

So my flow layout should look like this (depicted in the example's 2nd panel):

start 1 1 1 (newline)
1 1 1 end

I got the idea from this thread, but that doesn't have a nested item like in my example. Also tried to use this thread's advice, but still no dice.

I think the issue is with the auto layout for the middle container, as it sets the width to 100% for its child div, but I'm not sure how to fix this... any advice?