Disable scrolling in VerticalSplitPanel

Hi everyone,

let's say I have the following simple application:

@Theme("mytheme")
public class MyUI extends UI {

    @Override
    protected void init(VaadinRequest vaadinRequest) {
        VerticalSplitPanel panel = new VerticalSplitPanel();
        panel.setHeight(100, Unit.PIXELS);

        VerticalLayout vlayoutFirst = new VerticalLayout();
        vlayoutFirst.setHeight(500, Unit.PIXELS);

        VerticalLayout vlayoutSecond = new VerticalLayout();
        vlayoutSecond.setHeight(500, Unit.PIXELS);

        panel.setFirstComponent(vlayoutFirst);
        panel.setSecondComponent(vlayoutSecond);

        setContent(panel);
    }

    @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
    @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
    public static class MyUIServlet extends VaadinServlet {
    }
}

I am using a VerticalSplitPanel and set VerticalLayouts as first and second components. The VerticalSplitPanel has a fixed height of 100 pixels. Both VerticalLayouts have a fixed height of 500 pixels, which means, that you will see a scrollbar in the first and second part of the VerticalSplitPanel.

Now my question is: Is it possible to hide this scrollbar (disable scrolling) for only the first part of the VerticalSplitPanel but leave it like it is for the second part?

Just adding some information to make my intention clear. :)

The following HTML gets generated with the above code:

<div style="position: relative; width: 100%; height: 100%;">
    <div class="v-splitpanel-first-container v-scrollable" style="width: 100%; height: 50px;"> ... </div>
    <div class="v-splitpanel-vsplitter" style="position: absolute; width: 100%; left: 0px; top: 50px;"> <div></div> </div>
    <div class="v-splitpanel-second-container v-scrollable" style="position: absolute; width: 100%; height: 49px; top: 51px;"> ... </div>
</div

What I want is to remove the CSS class "v-scrollable" next to "v-splitpanel-first-container"

Ok, so I found a solution for this.

You can hide the scrollbar for the first container by simply setting this in your CSS:

.v-splitpanel-first-container {
      overflow: hidden;
 }    

Of course you have to make sure, only to use this for VerticalSplitPanels where you need it.