Is there a way to set dynamic width & height for plotly graphs?

Question

I am trying to create a Dashboard using Dash and Plotly graphs. I have also added dash bootstrap components for card-component.

I want to fit 4 graphs on 4 cards in this fashion:

I was able to create card body using following code:

import dash_core_components as dcc
import dash_bootstrap_components as dbc
import dash_html_components as html

layout = html.Div(
    [
        dbc.Row(
            [
                dbc.Col([dbc.Card(dbc.CardBody([html.P(dcc.Graph(figure=figure1))]))], width=8),
                dbc.Col([dbc.Card(dbc.CardBody([html.P(dcc.Graph(figure=figure2))]))], width=4),
            ]
        ),
        dbc.Row(
            [
                dbc.Col([dbc.Card(dbc.CardBody([html.P(dcc.Graph(figure=figure1))]))], width=6),
                dbc.Col([dbc.Card(dbc.CardBody([html.P(dcc.Graph(figure=figure2))]))], width=6),
            ]
        ),
    ]
)

However, the plotly graphs, based on data, sometimes expands outside the card.

How can I make the graph width dynamic(expanding and extracting) making them stay inside the card.

And, how can I keep the height dynamic so that all 4 graphs are visible without scrolling.