[BUG] Graph(style='height=100%') fails when reducing window size on Firefox

PIP

dash (1.0.2)
dash-bootstrap-components (0.7.0)
dash-core-components (1.0.0)
dash-daq (0.1.7)
dash-html-components (1.0.0)
dash-renderer (1.0.0)
dash-table (4.0.2)

Describe the bug

Writing: Graph(..., style=dict(height='100%'))

Expected behavior

The graph should fill the full height of the div, which will obey normal CSS rules, that is, span all the available space in the layout. It should not cause any overflow, and respond to window resize (also on Firefox 😉.

Actual behavior

• A scrollbar appears for a small amount of overflow (both Chrome and Firefox). Since the amount is small, it is possible to work around this with overflow=hidden, but it may cause clipping (e.g. if using long labels for the X axis, etc.).

• Reducing window size does not cause graph resize (Firefox only). That is strange, one would expect that any resize event is handled the same way, regardless if the new size is higher or lower than the original size.

Edit

The following example almost works, except for the two issues above. This threw me off, originally I thought that the feature does not work at all. I edited the issue title and content accordingly.

[Marc-Andre-Rivet]

@antoinerg Too fast! I updated the comment above with responsive=True 😀

[wbrgss]

@orenbenkiki I too have experienced some frustrations using Flexbox layouts with dcc.Graph — there is more work to be done on complex flex layouts. For your simple example, I think this may work:

...
        dcc.Graph(
            figure=dict(layout=dict(autosize=True)),
            config=dict(responsive=True),
            style={
                'height': '100%',
            },
        ),

Behaviour on Firefox without my suggestion (cut-off x-axis)

With my suggestion (responsive=True)

That is, add responsive=True to the config argument in dcc.Graph(). You can thank @antoinerg for that. Related issue plotly/plotly.js#3034 and PR: plotly/plotly.js#3056

Does that solve your problem? The documentation for this could probably be higher-profile, sorry about that. There is a section on it here.

I also want to echo @alexcjohnson that we appreciate your clear and well-defined issues with examples!