Issue with DataTable (inline-block) and any html,dcc elements in Dash

Question

I'm using Dash to create a web dashboard with this layout:

app.layout = html.Div([

html.H1("DashBoard Bonos Buenos Aires", style={'text-align': 'center'}),

html.Div(
    
    className='row',
    children=[
    
        html.Div([

            html.Div([

                html.H2("Esquemas", style={'text-align': 'center'}),

                dash_table.DataTable(
                id='EsquemasBonos',
                columns=[{"name": i, "id": i} for i in Gasto.columns],
                data=Gasto.to_dict('records'), style_table={'overflowY': 'scroll'})

            ], style={'height': '300px', 'overflow': 'scroll'}),

            html.Div([

                html.H2("TablaTotal", style={'text-align': 'center'}),

                dash_table.DataTable(
                id='TablaTotal',
                columns=[{"name": i, "id": i} for i in GastoTotal.columns],
                data=GastoTotal.to_dict('records'), style_table={'overflowY': 'scroll'})

            ]),
    
            html.Br(),

    
            html.Div([

                html.H2("Tabla Full", style={'text-align': 'center'}),

                dash_table.DataTable(
                id='TablaFull',
                columns=[{"name": i, "id": i} for i in PorDriverID1.columns],
                data=PorDriverID1.to_dict('records2'), style_table={'overflowY': 'scroll'})

            ], style = {'width': '100%', 'height': '500px', 'overflow': 'scroll'}),
                
        ], style={'width': '50%', 'display': 'inline-block'}),


        html.Div([
            html.H2("Gasto por Esquema", style={'text-align': 'center'}),

            dcc.Graph(id='Gasto', figure=fig)

        ], style={'width': '50%', 'display': 'inline-block',}),

    ]),
])

And i want to show the tables on one half of the screen and the graph on the other half. But for some reason i don't understand this is the output.

Imagen

I want the graph and the table to be on the same level. I already tried with inline block but i can't seem to fit the graph and table on the same "row".

Answer 1

I also had this problem, using "style={'overflow':'auto'}" in the HTML div that holds the table fixed it for me.