[Bugfix] Fix Container Height

[samhinshaw]

Resolves #7298
Resolves #7312

Summary of Changes

The plot container should always take the full with the height of its parent (the graph div). This ensures that for responsive plots without a height or width set, the paper div will take up the full height & width of the graph div. For responsive plots without a height or width set, if the plot container's height is left to 'auto', its height will be dictated by its childrens' height (plus its padding and border).

The plot container's only child is the paper div. In this scenario, the paper div's height will be set to 100%,¹ which will be 100% of the plot container's auto height. That is meaninglesss, so the browser will use the paper div's children to set the height of the plot container instead.² However, the paper div's children do not have any height, because they are all positioned absolutely, and therefore take up no space.³

Additional Information

Backport PR to Plotly v2: #7314

Footnotes

1. https://github.com/plotly/plotly.js/blob/f8c7b5db5a150722538d6fed06e04ee176d98336/src/plot_api/subroutines.js#L55-L58 ↩

2. https://codepen.io/samhinshaw/pen/XJrNgNL ↩

3. https://codepen.io/samhinshaw/pen/mybOwWm ↩

[archmoj]

@samhinshaw Thanks very much for the PR. The v2.35.3 is released on Friday.
IMHO we should also include this patch on the next v3 pre-release ASAP.
@gvwilson please advise.