Dynamic Autoresizing with Parent Div's height not working with Plotly Dash-Draggable

Dash Python
1

I am working Dash-draggable module along with Plotly’s Dynamic pattern-matching callback, to dynamically generate charts that can be easily draggable and resizable.
But i facing hugely with Plotly inherent resizing issue, which is not resizing my Graph when kept inside a ‘Div’.

Following code works perfectly:

import dash
from dash.dependencies import Input, Output, ClientsideFunction
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import plotly.express as px
import pandas as pd
from dash.exceptions import PreventUpdate

import dash_draggable


external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv')

app.layout = html.Div([
    html.H1("Dash Draggable"),
    dash_draggable.DraggableDashboard(
        id='draggable',
        clearSavedLayout=True,
        ncols=12,
        nrows=16,
        width=1500,
        # style={"position": "relative",},
        layout=[
            {
                "i": "graph-with-slider",
                "x":0,
                "y":0,
                "w":4, "h":12,
            },
            {
                "i": "year-slider",
                "x": 0,
                "y":0,
                "w":4, "h":2
            },
        ],
        children=[
            dcc.Graph(
                id="graph-with-slider",
                responsive=True,
                style={
                    "width":"100%",
                    "height":"100%",

                }),
            
            dcc.Slider(
                id='year-slider',
                min=df['year'].min(),
                max=df['year'].max(),
                value=df['year'].min(),
                marks={str(year): str(year) for year in df['year'].unique()},
                step=None
            )
        ]
    ),
])


@app.callback(
    Output("graph-with-slider", 'figure'),
    [Input('year-slider', 'value')])
def update_figure(selected_year):
    filtered_df = df[df.year == selected_year]

    fig = px.scatter(filtered_df, x="gdpPercap", y="lifeExp",
                     size="pop", color="continent", hover_name="country",
                     log_x=True, size_max=55)


    fig.update_layout(transition_duration=500)

    return fig



if __name__ == '__main__':
    app.run_server(debug=True, port='5080')

The above cord works perfectly, with graph resizing with drag & resize event. But when i put graph inside a Div (required for my dynamic callback application), the Resizing fails w.r.t. to Height. Plz find below the modified code.

app.layout = html.Div([
    html.H1("Dash Draggable"),
    dash_draggable.DraggableDashboard(
        id='draggable',
        clearSavedLayout=True,
        ncols=12,
        nrows=16,
        width=1500,
        # style={"position": "relative",},
        layout=[
            {
                "i": "graph-with-slider",
                "x":0,
                "y":0,
                "w":4, "h":12,
            },
            {
                "i": "year-slider",
                "x": 0,
                "y":0,
                "w":4, "h":2
            },
        ],
        children=[
           html.Div([
            dcc.Graph(
                id="graph-with-slider2",
                responsive=True,
                style={
                    "width":"100%",
                    "height":"100%",

                }),
            ],
            id = "graph-with-slider",
            ),
            
            dcc.Slider(
                id='year-slider',
                min=df['year'].min(),
                max=df['year'].max(),
                value=df['year'].min(),
                marks={str(year): str(year) for year in df['year'].unique()},
                step=None
            )
        ]
    ),
])


@app.callback(
    Output("graph-with-slider2", 'figure'),
    [Input('year-slider', 'value')])
def update_figure(selected_year):
    filtered_df = df[df.year == selected_year]

    fig = px.scatter(filtered_df, x="gdpPercap", y="lifeExp",
                     size="pop", color="continent", hover_name="country",
                     log_x=True, size_max=55)


    fig.update_layout(transition_duration=500)

    return fig



if __name__ == '__main__':
    app.run_server(debug=True, port='5080')

I am placing Graph inside div, because Dynamic-callback Matching application require ‘id’ as following format-

id = {'type':'chart-plot', 'index':1}

But Dash-draggable require component ID - ‘id’ to be in ‘int’ or ‘str’ format. The above ‘dict’ format is failing to be recoganised by dash-draggable module.
Looking if anyone can help me out in this issue. I found on the internet, that there is some issue with Plotly Chart Resizing w.r.t. parent DIV Height!