How to span full height that left in vertical dbc.col space with dash bootstrap dbc.row?

Hello! Recently I started to learn Dash and its a really great project! Thank you for you work!
For now I am trying to build an adaptive app with Dash Bootstrap which consists of two columns - left one is a menu, right one is a content column for tables and plots. Within the second column there is a row block to format content position. For one of the content pages I would like to make a container with adaptive height for cytocsape tree graph. Initially I took dbc.Row object to create it and paste graph as a child. But I cant figure out how to tweak CSS or HTML structure to allow this container span full height left in the content column? Here is a code recreation:

import dash
import dash_bootstrap_components as dbc
from dash import html

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

graph_container = dbc.Row(
    class_name='g-0',
    style={
        'min-height': '100%',
        'background-color':'white'
        }
)

content = dbc.Row(
    [
        dbc.Col(
            [
                html.P('This is column for content'),
                html.P('Sample text 1'),
                html.P('Sample text 2'),
                graph_container
            ],
            width=12, # used to allow style width
            style={'background-color': 'grey', 'width': '98%'},
        )
    ],
    justify='center',
    class_name='g-0'
)

page_structure = [
    dbc.Row(
        [
            dbc.Col(
                html.P('This is column 1'),
                style={'background-color': 'cyan'},
                class_name='border',
                xs = 12 , sm = 12 , md  = 2, lg = 2, xl = 2,
            ),
            dbc.Col([
                #html.P('This is column 2'),
                content],
                style={'background-color': 'green', 'min-height':'100vh'},
                class_name='border',
                xs = 12 , sm = 12 , md  = 10, lg = 10, xl = 10,
            ),
        ],
        class_name='g-0'
    )
]

app.layout = dbc.Container(
    id='root',
    children=page_structure,
    fluid=True,
    class_name='g-0',
)

if __name__ == '__main__':
    app.run(debug=True)

This is a result of this code:

White block represents container for the plot. It must stretch to the bottom line, or next object of the content column.

In my search I tried to write 'height': '100%' for each parent and 'height': '1px' in style of column 2 because of 'min-height': '100vh' property. But in that case graph container will create scroll and unfilled areas of main columns. See fig. below (changed color to orange for visibility):

Maybe there is a better approach for such cases?
Thank you!

I would suggest dropping some of the inner rows and columns in your solution. Rows and columns are only really useful when you have a row with multiple columns. Otherwise it’s just creating a lot of nesting.

Instead I think using CSS Flexbox is a good option here, because it allows you to create a column, and specify that one item should expand to fill available space. Read more about flexbox here, and about Bootstrap Flexbox utility classes here

Here’s a modified version of your example that does what you want. The second column is turned into a flex column with d-flex flex-column and we make the graph container expand to fill the available space with flex-grow-1.

import dash
import dash_bootstrap_components as dbc
from dash import html

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

graph_container = html.Div(
    style={"backgroundColor": "white"}, className="flex-grow-1"
)

content = html.Div(
    [
        html.P("This is column for content"),
        html.P("Sample text 1"),
        html.P("Sample text 2"),
        graph_container,
    ],
    className="h-100 d-flex flex-column",
)

page_structure = [
    dbc.Row(
        [
            dbc.Col(
                html.P("This is column 1"),
                style={"background-color": "cyan"},
                class_name="border",
                xs=12,
                md=2,
            ),
            dbc.Col(
                [content],
                style={"backgroundColor": "green", "height": "100vh"},
                class_name="border",
                xs=12,
                md=10,
            ),
        ],
        class_name="g-0",
    )
]

app.layout = dbc.Container(
    id="root",
    children=page_structure,
    fluid=True,
    class_name="g-0",
)

if __name__ == "__main__":
    app.run(debug=True)
1 Like

@tcbegley, thank you for the clarification about rows and columns usage! I will update my layouts.
Flexbox property works perfectly as well! I am very grateful to you!

1 Like