Dash datatable inherit height from parent div

Dash Python
1

Hey everyone,

I would like to place a table and some controls inside a parent div. I would then control the size of the parent div and let the table and controls receive a fraction of the height of the parent div.

However, it seems that the table only responds to vh and not %. Is there any way to adjust the height of the table in proportion to the div it is contained in?

Below I am attaching a minimal example.

Thanks for your help,
Benjamin

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table as dt
from dash.dependencies import Input, Output
from dash.exceptions import PreventUpdate
import dash_table

import numpy as np
import pandas as pd


def get_some_data(Nobs=1000):
    def get_id(N=15):
        import random
        import string
        return ''.join(random.choice(string.ascii_uppercase + string.digits) for _ in range(N))

    def get_ids(N=1000):
        return [get_id() for _ in range(N)]
    ids = get_ids(N=Nobs)
    nvalcols = 10
    index = ['id']+['val{}'.format(ix) for ix in range(nvalcols)]
    data = [ids] + [list(np.random.randn(Nobs)) for _ in range(nvalcols)]
    df = pd.DataFrame(data=data, index=index).T
    return df
df = get_some_data()


style_table = {
    'minWidth': '100%',
    'maxWidth': '100%',
    'minHeight': '300px',
    # Note: Cannot use % here. Need to use vh
    # Fixing vh does not give me the ability to scale the controls with the table
    'height': "80vh",
    'maxHeight': "80vh",
}

tablediv = dash_table.DataTable(
    id='table',
    fixed_columns = {'headers': True, 'data': 2},
    columns=[{"name": i, "id": i} for i in df.columns],
    data=df.to_dict('records'),
    style_table=style_table,
)


app = dash.Dash(__name__)

margin = 10
style = {
    'width': f'calc(100% - {margin*2}px)',
    'height': f'calc(100% - {margin*2}px)',
    'maxHeight': f'calc(100% - {margin*2}px)',
    'margin': f'{margin}px',

    'backgroundColor': 'green',
}


container = html.Div([
    tablediv,
], style=style, id='main_container')
app.layout = container


if __name__ == '__main__':
    app.run_server(host='0.0.0.0', debug=True, port=8050, 
                    dev_tools_ui=False)