How do I make the contents of a vaadin-split-layout scrolling independently?

I have the following for a polymer web application. The whole page scrolls. I would like for the contents of and to scroll independently. foo has a longer view and bar is generally able to fit in the page with maybe a little vertical scrolling.

How do I make the two contents of vaadin-split-layout scroll independently vertically?

<app-drawer-layout fullbleed force-narrow>
    <app-drawer slot="drawer">
        <app-toolbar>
            <div main-title>Models</div>
        </app-toolbar>
        <section>
            <div style="margin-bottom:90px;width:100%;"></div>
        </section>
    </app-drawer>
    <app-header-layout>
        <app-header slot="header" fixed effects="waterfall">
            <app-toolbar>
                <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
                <iron-icon id="logo" src="icon.svg"></iron-icon>
                <div main-title>Spliter Sample</div>
            </app-toolbar>
        </app-header>
        <section>
            <vaadin-split-layout orientation="horizontal">
                <foo></foo>
                <bar></bar>
            </vaadin-split-layout>
        </section>
    </app-header-layout>
</app-drawer-layout>

Thank you for any advice.

Solution

You can style the panels of a vaadin-split-layout as any other div as the panels are in the light DOM as you can see when inspecting their examples.

Thus give them an explicit height and an overflow:auto or overflow-y:auto; to enable scrolling. The style rules be placed in your usual CSS.