Flexbox в Dash dbc.Tabs ⇐ CSS

[Anonymous]

Я пытаюсь поместить dcc.Graph в dbc.Tab. Предполагается, что сюжет будет располагаться в нижней части экрана, поэтому я попытался использовать flexbox. Моя попытка выглядит так:

Код: Выделить всё

from dash import dcc, html, Dash
import dash_bootstrap_components as dbc
import plotly.express as px

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

app.layout = html.Div(
style={"height": "100vh"},
children=[
dbc.Tabs(
children=[
dbc.Tab(
label="Graph",
children=[
dcc.Graph(
figure=px.line(x=[0, 1, 2, 3], y=[0, 1, 0, 1], title="Simple Graph"),
style={"flex": "1", "display": "flex", "flexDirection": "column"},
)
]
),
dbc.Tab(label="Other"),
],
),
],
)

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

К сожалению, это работает не так, как ожидалось. График останавливается задолго до нижнего края окна.


Я также пробовал без вкладок:

Код: Выделить всё

from dash import dcc, html, Dash
import dash_bootstrap_components as dbc
import plotly.express as px

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

app.layout = html.Div(
style={"height": "100vh"},
children=[
dcc.Graph(
figure=px.line(x=[0, 1, 2, 3], y=[0, 1, 0, 1], title="Simple Graph"),
style={"flex": "1", "display": "flex", "flexDirection": "column"},
)
],
)

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

Это расположит график так, как я хочу.


В результате моего исследования я обнаружил, что мне нужно установить высоту слоев над графиком. Однако я не могу найти способ сделать это для содержимого dbc.Tab, только для содержимого навигации вверху. Есть ли способ сделать это?
Будем благодарны за любую помощь.>

Подробнее здесь: https://stackoverflow.com/questions/797 ... h-dbc-tabs