Expand Card and Figure Height to Fill Parent

Using dash bootstrap components, is there a way to make dbc.card fill the height of its parent div so it updates dynamically? Additionally, I have a figure in the card that I wish to expand to fill the card. What’s the best way of doing this?


Hey Jules,

Ever get this solution? I’ve stumbled across this need as well!

1 Like

Bumping cause I’ve long wanted this.

From the documentation:

figure.layout.autosize - if True , sets the height and width of the graph to that of its parent container

You would think this would do it, but it sets the height & width necessary to fit the graph as a square. It does not actually adjust both the height and width to fill the graph.

1 Like

i ended up including in a for loop that identifies all dynamic situations in my callback. Luckily, there were only three situations. Warn, Fail, Pass.

I think there might be a default height of 450px set in dcc.Graph, if you add style={"height":"100%"} or with bootstrap: className="h-100" then the graph will fill the parent container.

Here’s an example:

from dash import Dash, dcc, html
import plotly.express as px
import dash_bootstrap_components as dbc

df = px.data.tips()

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container(
            dcc.Graph(figure=px.bar(df, x="day", y="total_bill"),
            style={"height": 700},
            className="p-4 bg-secondary",

if __name__ == "__main__":

I added some background color to the card so you can see the card vs the graph. This is what it looks like with the height set to 100%

And this is without height set to 100%

1 Like