Vertical space using Flex not respected in Multi-page app?

Dash Python
1

Hi, all. It has been a while since I last posted, but I have encountered some frustrating behavior using Flex that it seems should be easy to overcome, but is not.

My app has dbc.Button’s on the very bottom of it that allow for multi-page navigation. Each page in my app is just the content changing above all of the dbc.Button’s, so pressing any of the Buttons will only load new content at the top of my app, which should go all the way down and touch said Buttons.

This is how it is ideally supposed to look like:

Screen Shot 2021-06-10 at 4.01.09 PM

The thing is, I can’t get the new page which loads to stretch its height all the way to the bottom of the app, it only ever goes halfway/partway.

Would anyone have suggestions as to how Flex can be used to force the new page that is loaded (empty div) to take up all of the available vertical space?

Shouldn’t 'flex':'1 0 auto' in empty_div do the trick?

app = dash.Dash()

#Setting up the Default Div

#Data
df = px.data.stocks()
x = df.date
y = df.AAPL

default_div = [

html.H1("A Nice Graph", style={'text-decoration': 'underline', 'width':'20px'}),

html.Div(children=[dcc.Graph("Graph",
                             figure={
                                     'data': [{'x': x, 'y':y, 'line':{'color':'#95a534'}}],
                                     'layout': go.Layout(margin={'t':25, 'b':25, 'l':50, 'r':40},
                                                         title=go.layout.Title(text="Just A Nice Graph"))
                             },
                             style={'height':'200px'}
                            )
                   ]
        )

]

#Setting up the Empty Div
empty_div = html.Div(“empty div”, style={‘outline’:‘2px outset blue’,
‘border’: ‘20px solid orange’,
‘flex’:‘1 0 auto’,
‘background’:‘white’}
)

#The app
app.layout = html.Div(children=[

dcc.Location(id="url"), #To allow multi-page buttons to work

html.Div(children=[
    
    html.Div(id="App_body", style={'flex':'1 1 auto'}),
    
    html.Div(id="Navigation_buttons", children=[dbc.Button("Button 1", href="/button1_clicked", style={'font-family':'copperplate', 'font-size':'10px'}), 
                                                dbc.Button("Button 2", href="/button2_clicked", style={'font-family':'copperplate', 'font-size':'10px'}),
                                                dbc.Button("Button 3", href="/button3_clicked", style={'font-family':'copperplate', 'font-size':'10px'})
                                               ],
                                           
             style={'display':'flex',
                    'margin-top':'auto', 
                    'flex':'0 1 auto',
                    'width': '200px'}
            ),
    
],      
         style={'border': '20px solid orange',
                'height':'400px', 'width':'200px',
                'display':'flex', 'flex-flow':'column',
                'background':'white'} 
        ),

])

@app.callback(Output(“App_body”, “children”), [Input(“url”, “pathname”)])
def serve_content(pathname):
if pathname == “/button1_clicked”:
return default_div
return empty_div

if name == ‘main’:
app.run_server(debug=True)

Environment:
Mac OSX - 10.11.6
Python - 3.8.7
Dash - 1.20.0
plotly - 4.14.3

2

Does my question make any sense?