From 083b8473136ff7ea9d47dea2162dc42f83e66846 Mon Sep 17 00:00:00 2001
From: SharadhNaidu <sharadhanaidu@rvu.edu.in>
Date: Fri, 15 May 2026 12:14:33 +0530
Subject: [PATCH] Fix to_html responsive height by styling outer wrapper div

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
---
 CHANGELOG.md               |  1 +
 plotly/io/_html.py         |  4 ++--
 tests/test_io/test_html.py | 47 ++++++++++++++++++++++++++++++++++++++
 3 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ccc184c23af..ced9e08f19b 100644
--- 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
index a9ff68c23ea..c2153dc5b0b 100644
--- 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
index 774bec7bde2..5661a6486f6 100644
--- 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")