Display: inline-block stops graphs from auto-resizing

Dash Python
1

Hi,

I am trying to display 3 graphs side by side, however as soon as I use ‘inline-block’ they stop resizing and one goes out of the window. I tried to fiddle with lots of options with no result:

    html.Div(children=[
        html.Div(dcc.Graph(id='graph1'),
                 style={'padding': '0px 10px 0px 0px',  'width': 'inherit'}),
        html.Div(dcc.Graph(id='graph2'),
                 style={'padding': '0px 10px 0px 0px',  'display': 'inline-block', 'width': 'inherit'}),
        html.Div(dcc.Graph(id='graph3'),
                 style={'padding': '0px 10px 0px 0px',  'display': 'inline-block', 'width': 'inherit'})],
    style={'padding': '10px 10px 10px 10px', 'height': 'inherit', 'width': 'inherit'})

image
image1072×376 3.97 KB

The above picture shows that without ‘inline-block’ auto-resize works. If i set ‘width’ to say 33% auto-resize works again, but when going under that value graphs go out of screen again. Any ideas what I’m doing wrong?

Thanks