Min-height not working

I have a webpage which introduces an iframe with a Dash application:

<link rel="stylesheet" type="text/css" href="dashboard.css">
<iframe src="/dashapp"></iframe>

dashboard.css consists on the following:

body {
    font-size: .875rem;
}

.feather {
    width: 16px;
    height: 16px;
    vertical-align: text-bottom;
}

@media (max-width: 767.98px) {
    .sidebar {
        top: 5rem;
    }
}

.sidebar-sticky {
    position: relative;
    top: 0;
    height: calc(100vh - 48px);
    padding-top: .5rem;
    overflow-x: hidden;
    overflow-y: auto;
}

@supports ((position: -webkit-sticky) or (position: sticky)) {
    .sidebar-sticky {
        position: -webkit-sticky;
        position: sticky;
    }
}

.sidebar .nav-link .feather {
    margin-right: 4px;
}

.navbar .navbar-toggler {
    top: .25rem;
    right: 1rem;
}

.navbar .form-control {
    padding: .75rem 1rem;
    border-width: 0;
    border-radius: 0;
}

iframe {
    border: none;
    min-width: 100%;
    min-height: 100%;
}

min-width makes the frame take full-width, but min-height does not take full-height. I don’t understand why it is.

My Dash application, which I insert within the iframe, is the following:

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(
    __name__, server=server, routes_pathname_prefix='/dashapp/',
    external_stylesheets=[
        {
             'href': 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css', 
             'rel': 'stylesheet',
             'integrity': 'sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk',
             'crossorigin': 'anonymus'
         }
    ],
    external_scripts=[
         {
             'src': 'https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js',
             'integrity': 'sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo',
             'crossorigin': 'anonymus'
         },
         {
             'src': 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js',
             'integrity': 'sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI',
             'crossorigin': 'anonymus'
         },
         {'src': 'https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.9.0/feather.min.js'}
    ]
)

app.layout = html.Div(
    className='container-fluid',
    children=[
        html.Div(
            className='row',
            children=[
                html.Nav(
                    id='sidebarMenu',
                    className='col-md-3 col-lg-2 d-md-block bg-light sidebar collapse',
                    children=[
                        html.Div(
                            className='sidebar-sticky pt-3',
                            children=[
                                html.Ul(
                                    className='nav flex-column',
                                    children=[
                                        html.Li(
                                            className='nav-item',
                                            children=[
                                                html.A(
                                                    className='nav-link',
                                                    children=[
                                                        html.Span('Raw Data')
                                                    ]
                                                )
                                            ]
                                        ),
                                        html.Li(
                                            className='nav-item',
                                            children=[
                                                html.A(
                                                    className='nav-link',
                                                    children=[
                                                        html.Span('Activity')
                                                    ]
                                                )
                                            ]
                                        ),
                                        html.Li(
                                            className='nav-item',
                                            children=[
                                                html.A(
                                                    className='nav-link',
                                                    children=[
                                                        html.Span('Prototypes')
                                                    ]
                                                )
                                            ]
                                        ),
                                        html.Li(
                                            className='nav-item',
                                            children=[
                                                html.A(
                                                    className='nav-link',
                                                    children=[
                                                        html.Span('Generator')
                                                    ]
                                                )
                                            ]
                                        )
                                    ]
                                )
                            ]
                        )
                    ]
                ),
                html.Main(
                    role='main',
                    className='col-md-9 ml-sm-auto col-lg-10 px-md-4',
                    children=[
                        html.Div(
                            className='d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom',
                            children=[
                                html.H1(
                                    'Dashboard',
                                    className='h2'
                                ),
                                html.Div(
                                    className='btn-toolbar mb-2 mb-md-0',
                                    children=[
                                        html.Div(
                                            className='btn-group mr-2',
                                            children=[
                                                html.Button(
                                                    'Share',
                                                    type='button',
                                                    className='btn btn-sm btn-outline-secondary'
                                                ),
                                                html.Button(
                                                    'Export',
                                                    type='button',
                                                    className='btn btn-sm btn-outline-secondary'
                                                )
                                            ]
                                        )
                                    ]
                                )
                            ]
                        ),
                        html.Table([
                            html.Tr([
                                html.Label(
                                    'Buildings:',
                                    htmlFor='building-dropdown',
                                ),
                                dcc.Dropdown(
                                    id='building-dropdown',
                                    multi=True,
                                    placeholder="Select building(s)",
                                ),
                                html.Label(
                                    'Date:',
                                    htmlFor='datepicker'
                                ),
                                dcc.DatePickerRange(
                                    id='datepicker',
                                    minimum_nights=0,
                                    clearable=True,
                                )
                            ]),
                            html.Tr([
                                dcc.Graph(
                                    id='graph',
                                )
                            ]),
                            dcc.Interval(
                                id='interval',
                                max_intervals=1
                            )    
                        ])
                    ]
                )
            ]
        )
    ]
)

1 post - 1 participant

Read full topic