Fix to_html responsive height by styling outer wrapper div

SharadhNaidu · SharadhNaidu · commit 083b8473136f · 2026-05-15T12:14:33.000+05:30
The HTML produced by `to_html` wraps the figure in an outer `<div>` with no inline style. The inner figure div sets `height:100%`, but because the wrapper has no height, that 100% resolves to zero and plotly.js falls back to its hardcoded 450px. The result is that the documented default of `default_height='100%'` cannot inherit from a sized parent container, so figures embedded in responsive layouts (Jinja templates, Dash containers with `vh`/`%` heights, etc.) silently render at 450px. Move the requested dimensions onto the wrapper and let the inner figure div fill it. Pixel defaults still produce a fixed-size figure; percentage defaults now propagate from the parent container as the docstring claims. Closes #5591
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 - Use presence of `COLAB_NOTEBOOK_ID` env var to enable Colab renderer instead of testing import of `google.colab` [[#5473](https://github.com/plotly/plotly.py/pull/5473)], with thanks to @kevineger for the contribution!
 - Update tests to be compatible with numpy 2.4 [[#5522](https://github.com/plotly/plotly.py/pull/5522)], with thanks to @thunze for the contribution!
 - Add default headers to be passed in to Kaleido v1.3.0 to avoid blocked Open Street Map tiles [#5588](https://github.com/plotly/plotly.py/pull/5588)]
+- Propagate the requested `default_height`/`default_width` to the outer wrapper div produced by `to_html` so that responsive (percentage) dimensions inherit from a sized parent container instead of collapsing to the plotly.js 450px fallback [[#5591](https://github.com/plotly/plotly.py/issues/5591)]
 
 ### Updated
 - The `__eq__` method for  `graph_objects` classes now returns `NotImplemented` to give the other operand an opportunity to handle the comparison [[#5547](https://github.com/plotly/plotly.py/pull/5547)], with thanks to @RazerM for the contribution!
diff --git a/plotly/io/_html.py b/plotly/io/_html.py
@@ -318,11 +318,11 @@ def to_html(
         )
 
     plotly_html_div = """\
-<div>\
+<div style="height:{height}; width:{width};">\
         {mathjax_script}\
         {load_plotlyjs}\
             <div id="{id}" class="plotly-graph-div" \
-style="height:{height}; width:{width};"></div>\
+style="height:100%; width:100%;"></div>\
             <script>\
                 window.PLOTLYENV=window.PLOTLYENV || {{}};{base_url_line}\
                 {script};\
diff --git a/tests/test_io/test_html.py b/tests/test_io/test_html.py
@@ -53,6 +53,53 @@ def test_cdn_includes_integrity_attribute(fig1):
     assert match is not None, "CDN script tag with integrity attribute not found"
 
 
+def test_outer_wrapper_carries_requested_dimensions(fig1):
+    """
+    Regression test for https://github.com/plotly/plotly.py/issues/5591.
+
+    The outer wrapper div produced by ``to_html`` must carry the requested
+    height/width so that percentage values propagate from a parent container
+    down to the figure element. Without this, a default of ``height='100%'``
+    collapses to zero (because the wrapper has no height) and plotly.js falls
+    back to its hardcoded 450px, breaking any responsive layout.
+    """
+    html = pio.to_html(fig1, include_plotlyjs="cdn", full_html=False)
+
+    wrapper_match = re.match(r'<div style="([^"]+)">', html)
+    assert wrapper_match is not None, (
+        "Outer wrapper div is missing inline style; responsive parents cannot "
+        "propagate dimensions to the figure."
+    )
+    wrapper_style = wrapper_match.group(1)
+    assert "height:100%" in wrapper_style
+    assert "width:100%" in wrapper_style
+
+    inner_match = re.search(
+        r'<div id="[^"]+" class="plotly-graph-div" style="([^"]+)">',
+        html,
+    )
+    assert inner_match is not None
+    assert "height:100%" in inner_match.group(1)
+    assert "width:100%" in inner_match.group(1)
+
+
+def test_outer_wrapper_respects_explicit_pixel_dimensions(fig1):
+    """Explicit pixel dimensions must reach the outer wrapper unchanged."""
+    html = pio.to_html(
+        fig1,
+        include_plotlyjs="cdn",
+        full_html=False,
+        default_width=600,
+        default_height=400,
+    )
+
+    wrapper_match = re.match(r'<div style="([^"]+)">', html)
+    assert wrapper_match is not None
+    wrapper_style = wrapper_match.group(1)
+    assert "height:400px" in wrapper_style
+    assert "width:600px" in wrapper_style
+
+
 def test_cdn_integrity_hash_matches_bundled_content(fig1):
     """Test that the SRI hash in CDN script tag matches the bundled plotly.js content"""
     html_output = pio.to_html(fig1, include_plotlyjs="cdn")
