GWT scrollbars not appearing

I am using Java GWT to create a UiBinder control. I am having a problem getting the scrollbars to show up. The UI has a master HorizontalPanel containing a left and right flow panels. Each are a assigned three graph widgets of 300x750 pixels for a total of six. There should be horizontal and vertical scrollbars, but they don't appear. If I remove the ScrollPanel, I can get the horizontal scrollbars to appear. I've tried using a FlowPanel instead of a HorizontalPanel, but the left and right flow panel children line up vertically underneath each other. Any help to get this working would be appreciated. I've included the ui.xml and java code below.

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
         xmlns:cw="urn:import:com.caseware.commons.client.ui.widgets"
         xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:style type="com.caseware.analytics.client.ResultsWidgets.PreviewMultiGraphContainer.CssStyles">

    .wrapper {
        height: 100%;
        width: 100%;
    }
    .message {
        text-align: center;
        font-size: 2rem;
        width: 100%;
    }
    .tablesContainer {
        overflow: auto !important;
        width: 100%;
        height: 100%;
        padding: 10px;
    }
    .tablesContainerHalf {
        overflow: auto !important;
        width: 100%;
        height: 50%;
        padding: 10px;
    }
    .table {
    }
    .table > * {
        display: inline-block;
    }
    .table + .table {
        padding-left: 10px;
    }
    .table2 {
        float: left;
    }
    .centerItem {
        justify-content: center;
    }
    .drillDownArea {
        width: 100%;
        height: 50%;
    }
    .simplePanel {
        overflow: auto !important;
    }
</ui:style>

<ui:with field="ac" type="com.caseware.analytics.client.i18n.AnalyticsConstants" />
<ui:with field='global' type='com.caseware.commons.client.bundles.StylesBundle' />

<g:HTMLPanel styleName="{style.wrapper}">
    <g:ScrollPanel addStyleNames="{style.simplePanel}">
        <g:HorizontalPanel ui:field="table" addStyleNames="{global.globalStyles.flexInline} {style.tablesContainer} {style.table}">
            <g:FlowPanel ui:field="leftTable" addStyleNames="{style.table} {style.table2}" visible="false"></g:FlowPanel>
            <g:FlowPanel ui:field="rightTable" addStyleNames="{style.table} {style.table2}" visible="false"></g:FlowPanel>
        </g:HorizontalPanel>
    </g:ScrollPanel>
</g:HTMLPanel>
</ui:UiBinder>

java file

package com.caseware.analytics.client.ResultsWidgets;

import java.util.List;

import com.google.gwt.core.client.GWT;
import com.google.gwt.resources.client.CssResource;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Widget;

public class PreviewMultiGraphContainer extends Composite {

private static PreviewMultiGraphContainerUiBinder uiBinder = GWT.create(PreviewMultiGraphContainerUiBinder.class);

interface PreviewMultiGraphContainerUiBinder extends UiBinder<Widget, PreviewMultiGraphContainer> {

}

interface CssStyles extends CssResource {
    String centerItem();
    String tablesContainer();
    String tablesContainerHalf();
}

@UiField CssStyles style;

@UiField HorizontalPanel table;

@UiField FlowPanel leftTable;

@UiField FlowPanel rightTable;

public PreviewMultiGraphContainer() {
    initWidget(uiBinder.createAndBindUi(this));
    HighChartsInjector.injectHighChart();
    table.setStyleName(style.tablesContainer());
}

public void clear() {

    leftTable.clear();
    leftTable.setVisible(false);
    rightTable.clear();
    rightTable.setVisible(false);
}

public void addGraphs(final List<Widget> wc) {
    for (final Widget w : wc) {
        _getTableToAppendTo().add(w);
    }
    leftTable.setVisible(leftTable.getWidgetCount() != 0);
    rightTable.setVisible(rightTable.getWidgetCount() != 0);

    table.addStyleName(style.centerItem());
    if (rightTable.isVisible()) {
        table.removeStyleName(style.centerItem());
    }
}

private FlowPanel _getTableToAppendTo() {
    if (leftTable.getWidgetCount() > rightTable.getWidgetCount()) {
        return rightTable;
    }
    return leftTable;
}
}

You cannot use HorizontalPanel - or any LayoutPanel - as a child of ScrollPanel, because these panels take their size from a parent. This means that your HorizontalPanel will always be the same height as your ScrollPanel - thus, no scroll bars will appear.

You need to use FlowPanel or similar panel that takes height from their content.

If you want two panels to be displayed side by side, you need to use standard CSS approaches: either use "float" property, or use flex-box CSS on the parent. Flex-box is supported by all modern browsers.

Also, unless you need specific functionality from ScrollPanel, you can simply remove it, and add "overflow: auto" property to your .wrapper style.