Nested panel not scrolling

[rbellow]

I am trying to create a panel with three sections and a docked toolbar on the bottom. The first section is the header and should be on every "Page" along with the toolbar. I also have a Panel for the "content" section with that includes a carousel and a regular Panel. I set the heights of the header and carousel and used vbox for the root and content panels for the layout. The problem is that the bottom section doesn't scroll and the toolbar gets pushed off the screen. I thought if I define the heights of all the other panels the one without the height defined would fill the space. I think I may be missing something. Any ideas?

Ext.application({
    name: 'App',
    autoMaximize: true,

    launch: function () {

        // the header in the first section
        var firstSection = Ext.create("Ext.Panel", {
            style: "background-color: yellow;",
            height: 70,
            html: 'first section'
        });

        // a carousel in the second section
        var secondSection = Ext.create("Ext.Carousel", {
            style: "border-bottom: solid 1px #003a66;",
            height: 240,
            items: [
                { html: '<div class="center">second section - Item 1</div>' },
                { html: '<div class="center">second section - Item 2</div>' },
                { html: '<div class="center">second section - Item 3</div>' }
            ]
        });

        // this section should scroll within itself but the
        // above 2 panels should not move
        var thirdSectionContent = Ext.create("Ext.Container", {
            items:[{
                html: [
                    'line 1<br />',
                    'line 2<br />',
                    'line 3<br />',
                    'line 4<br />',
                    'line 5<br />',
                    'line 7<br />',
                    'line 8<br />',
                    'line 9<br />',
                    'line 10<br />',
                    'line 11<br />',
                    'line 12<br />',
                    'line 13<br />',
                    'line 14<br />',
                    'line 15<br />',
                    'line 16<br />',
                    'line 17<br />',
                    'line 18<br />',
                    'line 19<br />',
                    'line 20<br />'
                ].join("")
            }]
        });

        var thirdSection = Ext.create("Ext.Panel", {
            items: [thirdSectionContent]
        });

        
        var navHome = Ext.create("Ext.Button", {
            dock: 'bottom',
            iconCls: 'home',
            iconMask: true
        });

        var navBlog = Ext.create("Ext.Button", {
            dock: 'bottom',
            iconCls: 'star',
            iconMask: true
        });

        // toolbar docked on the bottom
        var toolBar = Ext.create("Ext.Toolbar", {
            docked: 'bottom',
            items: [navHome, navBlog]
        });

        var twoSectionDisplay = Ext.create("Ext.Panel", {
            items: [secondSection, thirdSection]
        });

        var contentPanel = Ext.create("Ext.Panel", {
            layout: 'vbox',
            items: [twoSectionDisplay]
        });

        var rootPanel = Ext.create("Ext.Panel", {
            fullscreen: true,
            items: [firstSection, contentPanel],
            layout: 'vbox',
            dockedItems: [toolBar]
        });


    }
});

[rbellow]

Why is it that just typing out the problem gives you the answer. I docked the firstSection panel to the top and added scoll: vertical to the rootPanel and got the effect I was looking for.