How to create a sidebar in dash python

I am trying to make a multipage dashboard where the pages are fixed on top and there is a sidebar that is also fixed. But I have run into some issues:

1. I can't wrap my text in the sidebar
2. There is a weird border that cuts across my navbar
3. Is there a way to find out the top value for my style of the sidebar without manually checking everytime?

My code:
app.py

import dash
from dash import html
import dash_bootstrap_components as dbc

app = dash.Dash(__name__, use_pages=True, external_stylesheets=[dbc.themes.SPACELAB], suppress_callback_exceptions=True)
sidebar = dbc.Nav(
            [
                dbc.NavLink(
                    [
                        html.Div(page["name"], className="ms-2"),
                    ],
                    href=page["path"],
                    active="exact",
                )
                for page in dash.page_registry.values()
            ],
            vertical=False,
            pills=True,
            className="text-center border",
            justified=True,
            fill=True,
            style={"position": "fixed"}
)

app.layout = dbc.Container([
    dbc.Row(sidebar),
    html.Hr(),
    dbc.Row(dash.page_container)
], fluid=True)


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

page1.py

import dash
from dash import html, dcc
import dash_bootstrap_components as dbc

dash.register_page(__name__, path='/', name='Page 1')


SIDEBAR_STYLE = {
    "position": "fixed",
    "top": 42,
    "left": 0,
    "bottom": 0,
    "background-color": "#f8f9fa",
    'overflowY':'auto'
}

CONTENT_STYLE = {
    "display": "inline-block"
}

content = dcc.RadioItems(['New York City', 'Montreal','San Francisco'], 'Montreal', labelStyle={'display':'block'})

sidebar = html.Div(
    [
        html.H2("Sidebar", className="display-4"),
        html.Hr(),
        html.P(
            "A simple sidebar layout with navigation linkasdasdasdasdassdss"
        ),
        content
    ],
    style=SIDEBAR_STYLE,
)

maindiv = html.Div(
    id="first-div",
    children=[
        # first row
        html.Div([
            html.H2("First Row"),
            html.Hr(),
            html.P(
                "First row stuff", className="lead"
            )
        ]),

        # second row
        html.Div([
            html.H2("Second Row"),
            html.Hr(),
            html.P(
                "Second row stuff", className="lead"
            )
        ]),
    ],
    style=CONTENT_STYLE
)

# Create the Dash app layout
layout = html.Div([
    dbc.Row([
        dbc.Col(sidebar, width=2),
        dbc.Col(maindiv, width=10)
    ])
])

How can these issues be fixed?

Here is one solution.

In your page1.py, comment out "position": "fixed" and re-adjust sidebar and maindiv width.

# ...
# ...
# ...

SIDEBAR_STYLE = {
    # "position": "fixed",  # comment this out
    "top": 42,
    "left": 0,
    "bottom": 0,
    "background-color": "#f8f9fa",
    "overflowY": "auto",
}

# ...
# ...
# ...

# Create the Dash app layout
layout = html.Div([
    dbc.Row([
        dbc.Col(sidebar, width=3),  # adjust width
        dbc.Col(maindiv, width=9)  # adjust width
    ])
])